.spinner
  - (1..20).each do
    %i

@import "compass/css3";

$particles: 20;
$radius: 50; 

html, body {
  overflow: hidden;
  background: #111;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  
  animation-name: rotate;
  animation-direction: reverse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

i {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 52px;
  height: 52px;
  
  background: #fff;
  opacity: 1;
  border: 6px solid #111;
  border-radius: 0px;
    
  animation-name: spin;
//  animation-direction: reverse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@for $i from 1 through $particles {
  i:nth-child(#{$i}) {
    $angle: $i / $particles * 360;
    
    width: ($i * 14) + px;
    height: ($i * 14) + px;
    margin-top: - ($i * 14) / 2 + px;
    margin-left: - ($i * 14) / 2 + px;
    z-index: $particles - $i;
    transform:
      rotate( #{$angle}deg );
  
      transform-origin: 50% 50%;
      animation-delay: $i * (2s / $particles);
  }
}

@keyframes spin {
  40% {
    border-radius: 50px;
    
    transform: rotate( 180deg );
  }
}

@keyframes rotate {
  100% {
    transform: rotate( 360deg );
  }
}