Cacher is the code snippet organizer for pro developers

html
  body
    .spinner
      -for(var i=0; i<22; i++)
        li.cycle

@import "compass";
$spinnerColor: #000;
$spinnerSmoke: #111;
$spinnerSize: 100;
$dotSize: 7;
$shadowBlur: round($dotSize/2) - round($dotSize/5);
$shadowSpread: round($dotSize/2);

.spinner {
  list-style: none;
  width: #{$spinnerSize}px;
  height: #{$spinnerSize}px;
  display: block;
  position: relative;
  margin: 0 auto;
}

.cycle {
  position: absolute;
  display: block;
  height: #{$spinnerSize}px;
  width: $dotSize;
  border-radius: 50%;
}
.cycle:after{
  content: "";
  display: block;
  position: absolute;
  background-color: $spinnerColor;
  width: #{$dotSize}px;
  height: #{$dotSize}px;
  border-radius: 50% / 70%;
  
  animation: bounce 1.2s infinite linear;
}
@for $i from 0 through 21 {
  .cycle:nth-child(#{$i+1}){
          transform: rotateZ(#{$i*18}deg);
    }
    .cycle:nth-child(#{$i+1}):after{
  animation-delay: #{$i/20}s;
    }
}



@keyframes "bounce"{
      0%,15%,85%,100%{
	        top: 5px; 
	        
      }

      45%,55% {
	        top: 0px;         
  box-shadow: 0 0 #{$shadowBlur}px #{$shadowSpread}px $spinnerSmoke;
       }
}