body{ background-color: #3b3b3b; }

​

​

// Variables

$color: #65a3ff;

$delay: .15s;

$size: 10px;

$bullets: 4;

​

// Code

.loading{

  position: absolute;

  top: 50%;

  left: 50%;

  .bullet{

    position: absolute;

    padding: $size/2;

    border-radius: 50%;

    background: $color;

    animation: animIn 1s ease-in-out 0s infinite;

    $i: 0s;

    @for $level from 0 to $bullets {

      &:nth-child(#{$level + 1}) { animation-delay: $i; }

      $i: $i + $delay;

    }

  }

}

@keyframes animIn {

  0% {

    transform: translateX(-100px);

    opacity: 0;

  }    

  50%{ opacity: 1; }

  100%{

    transform: translateX(100px);

    opacity: 0;

  }

}