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; } }