.loading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 88px;
  margin: 0;
  padding: 0;
  position: absolute;
  background: hsla(0, 0%, 100%, 0.8);
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}
.loading > div {
  height: 22px;
  width: 3px;
  margin: 0 2px;
  padding: 0;
  background: #f27270;
  border-radius: 3px;
  animation-name: loading-bar;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.loading > div.bar1 {
  background-color: #00adef;
  animation-delay: 0.1s;
}
.loading > div.bar2 {
  background-color: #fff100;
  animation-delay: 0.2s;
}
.loading > div.bar3 {
  background-color: #ec018b;
  animation-delay: 0.3s;
}
.loading > div.bar4 {
  background-color: #4d4d4d;
  animation-delay: 0.4s;
}

@keyframes loading-bar {
  0% {
    transform: scaleY(0.2);
  }
  25% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(0.2);
  }
  75% {
    transform: scaleY(0.2);
  }
  100% {
    transform: scaleY(1);
  }
}

/*# sourceMappingURL=loading.css.map */