SOURCE

<div class="loading">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

.loading{
  transform:scale(.5);
  width:6rem;
  height2.5rem;
}
.item{
  position:absolute;
  top:0;
  width:.5rem;
  height:2.5rem;
  border-radius:5px;
  display:inline-block;
  background:#1abc9c;
  animation:loading 1s ease infinite;
}
.item:nth-child(1){
  left:0;
  animation-delay:-.65s;
}
.item:nth-child(2){
  left:1.3rem;
  animation-delay:-.78s;
}
.item:nth-child(3){
  left:2.6rem;
  animation-delay:-91s;
}
.item:nth-child(4){
  left:3.9rem;
  animation-delay:-78s;
}
.item:nth-child(5){
  left:5.2rem;
  animation-delay:-.65s;
}
@keyframes loading{
  0%{
    transform:scale(1)
  }
  50%{
    transform:scale(.3)
  }
  100%{
    transform:scale(1)
  }
}