- for (var i=0; i<18; i++)
  .outer
    .inner

$count: 18;
$size: 50px;
$time: 2s;

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

@include animation (spin) {
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

body{
    overflow: hidden;
    background: #000;
   
    .outer{
        position: absolute;
        left: 50%;
        top: 50%;
        width: $size;
        height: $size;
        border-radius: 50%;
        margin-left: - 2.25*$size;
        -ms-transform-origin: 225% 0%;
        -webkit-transform-origin: 225% 0%;
        -moz-transform-origin: 225% 0%;
        -o-transform-origin: 225% 0%;
        transform-origin: 225% 0%;
      
        @for $i from 1 through $count {
            &:nth-child(#{$i}) {
               -ms-transform: rotate($i*(360deg/$count)); 
               -webkit-transform: rotate($i*(360deg/$count)); 
               transform: rotate($i*(360deg/$count)); 
            }
        }
    }
  
    .inner {
        width: $size;
        height: $size;
        -webkit-animation: spin $time linear infinite;
        -moz-animation: spin $time linear infinite;
        -o-animation: spin $time linear infinite;
        animation: spin $time linear infinite;
                   
        &:before, &:after {
            content: '';
            position: absolute;
            width: $size / 5;
            height: $size / 5;
            background: #fff;
            box-shadow: 0 0 10px 1px #fff;
            border-radius: 50%;
            top: 50%;
            margin-top: - $size / 10;
        }
      
        &:before {
            left: - $size / 10;
        }
      
        &:after {
            left: $size - $size / 10;
        }
    }
}