#pre-load-spinner {
  height: 40px;
  font-size: 10px;
  position: absolute;
  left: calc(50% + 20px);
  top: calc(50% + 14px);
}

#pre-load-spinner > .spinner-title {
  font-size: 16px;
  margin-left: -15px;
}

#pre-load-spinner > .rect {
  height: 100%;
  width: 5px;
  display: inline-block;
  animation-name: sk-stretchdelay;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  background-color: #102027;
  margin-right: -2px;
}

.rect.rect1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -o-animation-delay: -1s;
  margin-right: -1px;
}
.rect.rect2 {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
}
.rect.rect3 {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  margin-right: -1px;
}
.rect.rect4 {
  animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
}
.rect.rect5 {
  animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(0.75);
  }
}