.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #234e9f;
  transition: opacity .1s;
  transition-delay: 3s;
  z-index: 9999;
}
.preloader.is-loaded {
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  /* opacity: 0; */
  /* z-index: 0; */
}

.pl-line {
  position: absolute;
  width: 1px;
  height: 150%;
  background: #234e9f;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(20deg);
  transition: opacity 1s ease-out;
  z-index: 999999;
}
.is-loaded .pl-line {
  opacity: 0;
}
.pl-line > div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  animation: pulse 2s infinite;
  will-change: transform;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.pl-l, .pl-r {
  position: absolute;
  top: 0;
  width: 70%;
  height: 100%;
  transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
  background: #234e9f;
}

.pl-l {
  left: -55%;
  transform: skew(-20deg);
  z-index: 99999;
}
.is-loaded .pl-l {
  transform: translateX(-100%) skew(-20deg);
}

.pl-r {
  right: -55%;
  transform: skew(-20deg);
  z-index: 99999;
}
.is-loaded .pl-r {
  transform: translateX(100%) skew(-20deg);
}

@keyframes pulse {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}