.loader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: visibility 0s, opacity 0.5s linear;
  background-color: $back-color;

  .loader-dots {
    position: absolute;
    top: 50%;
    left: 50%;

    .dots {
      position: absolute;
      padding: 10px;
      border-radius: 50%;
      background: $accent-color;
      -webkit-animation: loader 1s ease-in-out 0s infinite;
      animation: loader 1s ease-in-out 0s infinite;

      &:nth-child(1) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
      }

      &:nth-child(2) {
        -webkit-animation-delay: 0.15s;
        animation-delay: 0.15s;
      }

      &:nth-child(3) {
        -webkit-animation-delay: 0.30s;
        animation-delay: 0.30s;
      }

      &:nth-child(4) {
        -webkit-animation-delay: 0.45s;
        animation-delay: 0.45s;
      }
    }

  }
}

@keyframes loader {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
}