%div.loader
  - (1...26).each do |i|
    %div
View Compiled
$size: 100px;

.loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: $size;
  height: $size;
  margin: auto;
  div {
    width: $size / 5;
    height: $size / 5;
    float: left;
    animation: color_bitch 1s infinite ease;
    border-radius: 50%;
  }
  @for $i from 1 through 25 {
    div:nth-child(#{$i}) {
      animation-delay: ($i / 5)+s;
      animation-duration: ($i / 5)+s;
    }
  }
}

@keyframes color_bitch {
  $hue: random();
  0% {
    background: transparent;
  }
  50% {
    background:hsl($hue * 11 ,85%,70%);
  }
  100% {
    background: transparent;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js