Load effect

by Lazaro Contreras

HTML

<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100" />
</div>
<div class="thumb">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=100"...

CSS

html {
  overflow: hidden;
}

.thumb {
  position: relative;
  display: inline-block;
  top: 45px;
  left: 45px;
  float: left;
  height: 100px;
  margin: 0.5px;
  padding: 5px;
  opacity: 0;
  background: white;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  transition: .5s all ease;
  overflow: hidden;
}

.thumb img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.c{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:1px;
  height:1px;
  background:rgba(255, 255, 255, 0.5);
  border-radius:50%;
  opacity:1;
  transition: 1s all;
}

JavaScript

setTimeout(function() {
	var thumbs = document.querySelectorAll('.thumb');
  var i = 0;
  var show = setInterval(function() {
    thumbs[i].style.left = 0;
    thumbs[i].style.top = 0;
    thumbs[i].style.opacity = 1;
    i++
    if (i >= thumbs.length) {
      clearInterval(show);
    }
  }, 35, i);

}, 400);
var thumbs = document.querySelectorAll('.thumb');
for(var i = 0; i < thumbs.length ;i++){
  var thumb = thumbs[i];
	thumb.onclick = function(e){
	var color = document.querySelector('input');
	var circle = document.createElement('div');
  circle.className = 'c';
  circle.style.top = e.clientY - this.offsetTop + 'px';
  circle.style.left = e.clientX - this.offsetLeft + 'px';
  this.appendChild(circle);
  setTimeout(function(){
  		circle.style.transform = 'scale(500)';
      circle.style.opacity = 0;
    }, 10);
    setTimeout(function(){
      circle.remove();
    }, 2000);
	}
}