-var circles = 9;

-while (circles--)
  .circle

@import 'compass';

$bg: rgb(38, 126, 148);
$dot-color: #fff;

$circles: 9;
$dot-size: 9px;
$minDotCount: 4;
$minCircleSize: $dot-size*($minDotCount - 1);
$_2pi: 2*pi();

@mixin animation ($name) {
  @-webkit-keyframes #{$name} {@content;}
  @-moz-keyframes #{$name} {@content;}
  @-o-keyframes #{$name} {@content;}
  @keyframes #{$name} {@content;}
}

@mixin animation-use ($name, $time) {
  -webkit-animation: $name $time infinite linear;
  -moz-animation: $name $time infinite linear;
  -o-animation: $name $time infinite linear;
  animation: $name $time infinite linear;
}

.round {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}

body {
  background: $bg;
  overflow: hidden;
  
  .circle {
    @extend .round;
    
    &:after {
        @extend .round;
        content: '';
        width: $dot-size;
        height: $dot-size;
        margin: -$dot-size/2 0 -$dot-size/2;
    }
    
    @for $i from 0 to $circles {
      @include animation (spin + ($i + 1)) {
        to {
          -webkit-transform: rotate(($circles - $i) + turn);
          -ms-transform: rotate(($circles - $i) + turn);
          transform: rotate(($circles - $i) + turn);
        }
      }
      
      &:nth-child(#{$i + 1}) {
        $size: $minCircleSize + 3.5*$i*$dot-size;
        width: $size;
        height: $size;
        margin: -$size/2 0 -$size/2;
        @include animation-use(spin + ($i + 1), ($circles - 1)*($i + 1) + s);

        &:after {
          $b-s: ();
          @for $j from 1 through $minDotCount*($i + 1) {
            $x: $size/2*cos($j*$_2pi/($minDotCount*($i + 1))); 
            $y: $size/2*sin($j*$_2pi/($minDotCount*($i + 1)));
            $b-s: append($b-s, $x $y $dot-color, comma);
          }
          box-shadow: $b-s;
        }
      }
    }
  }
}