<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>
@keyframe loading {
  0% { height: 10px }
  10% { height: 11px }
  15% { height: 12px }
  20% { height: 13px }
  25% { height: 14px }
  30% { height: 15px }
  35% { height: 16px }
  40% { height: 17px }
  45% { height: 18px }
  50% { height: 19px }
  55% { height: 20px }
  60% { height: 21px }
  65% { height: 22px }
  70% { height: 23px }
  75% { height: 24px }
  80% { height: 25px }
  85% { height: 26px }
  90% { height: 27px }
  95% { height: 28px }
  100% { height: 29px }
}

@-webkit-keyframes loading {
  0% { height: 10px }
  10% { height: 11px }
  15% { height: 12px }
  20% { height: 13px }
  25% { height: 14px }
  30% { height: 15px }
  35% { height: 16px }
  40% { height: 17px }
  45% { height: 18px }
  50% { height: 19px }
  55% { height: 20px }
  60% { height: 21px }
  65% { height: 22px }
  70% { height: 23px }
  75% { height: 24px }
  80% { height: 25px }
  85% { height: 26px }
  90% { height: 27px }
  95% { height: 28px }
  100% { height: 29px }
}

.square {
  width: 20px;
  height: 10px;
  margin: 10px;
  position: relative;
  background-color: #DE0E42;
  animation-name: loading;
  opacity: 1;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.two {
  background-color: #2196f3;
   animation-delay: -0.5s;
}
.three {
  background-color: #8bc34a;
  animation-delay: -0.6s;
}
.four {
  background-color: #ffc107;
  animation-delay: -0.3s;
}
.container{
  width: 100wv;
  height: 100vh;
  display: flex; 
  align-items: center;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.