css loader

by elizabethkmathew

HTML

<div class="loader">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

CSS

.loader {
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eaeaea;
}

.line {
  height: 70px;
  width: 2px;
  margin-right: 15px;
  transform-origin: center center;
  animation: expand 1s ease-in-out infinite;
}

.loader .line:nth-child(1) {
  background-color: #F2BE58;
}

.loader .line:nth-child(2) {
  animation-delay: 180ms;
  background-color: #be3215;
}

.loader .line:nth-child(3) {
  animation-delay: 360ms;
  background-color: #5979A5;
}

.loader .line:nth-child(4) {
  animation-delay: 480ms;
  background-color: #3CB371;
}

@keyframes expand {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  25% {
    transform: scale(2);
    -webkit-transform: scale(2);
  }
}