SOURCE

<div class="loadding">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

* {margin:0;padding:0;}
.loadding {display:flex;justify-content:center;align-items:center; margin-top: 20px; }
.item { width:4px;height:25px;background:red; margin-left:4px;border-radius:2px; animation: aaa .6s linear infinite alternate; }
.item:nth-of-type(1) { animation-delay: -2s; }
.item:nth-of-type(2) { animation-delay: -1.6s; }
.item:nth-of-type(3) { animation-delay: -1.4s; }
.item:nth-of-type(4) { animation-delay: -1.2s; }
.item:nth-of-type(5) { animation-delay: -.8s; }


@keyframes aaa {
  0% { transform: scale(.3); }
  100% { transform: scale(1); }
}