.preloader__wrapper {
  position: relative;
}

.preloader {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black-color);
  transition: opacity 0.2s;
}

.preloader__bar {
  width: 5px;
  height: 30px;
  background: var(--white-color);
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  animation: loader 1.2s linear infinite;
}

.preloader__bar.is-1 { animation-delay: 0.1s; }
.preloader__bar.is-2 { animation-delay: 0.2s; }
.preloader__bar.is-3 { animation-delay: 0.3s; }
.preloader__bar.is-4 { animation-delay: 0.4s; }
.preloader__bar.is-5 { animation-delay: 0.5s; }
.preloader__bar.is-6 { animation-delay: 0.6s; }
.preloader__bar.is-7 { animation-delay: 0.7s; }
.preloader__bar.is-8 { animation-delay: 0.8s; }

@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: transparent;
  }
  50% {
    transform: scaleY(1);
    background: var(--white-color);
  }
  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}