/***
e.g.

<div class="preloader">
    <div class="cs-loader">
        <div class="cs-loader-inner">
            <label>	●</label>
            <label>	●</label>
            <label>	●</label>
            <label>	●</label>
            <label>	●</label>
            <label>	●</label>
        </div>
    </div>
</div>

***/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #49A9EE;
  z-index: 9999;
  transition: opacity .65s;
  &-hidden-add {
    opacity: 1;
    display: block;
    &-active {
      opacity: 0;
    }
  }
  &-hidden {
    display: none;
  }
}

.cs-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  &-inner {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    width: 100%;
    color: #FFF;
    text-align: center;

    label {
      font-size: 20px;
      opacity: 0;
      display: inline-block;

      &:last-child {
        animation: lol 3s infinite ease-in-out;
      }
      @for $i from 1 to 6 {
        &:nth-child(#{$i}) {
          animation: lol 3s (6 - $i) * 0.1s infinite ease-in-out;
        }
      }
    }
  }
}

@keyframes lol {
  0% {
      opacity: 0;
      transform: translateX(-300px);
  }
  33% {
      opacity: 1;
      transform: translateX(0);
  }
  66% {
      opacity: 1;
      transform: translateX(0);
  }
  100% {
      opacity: 0;
      transform: translateX(300px);
  }
}