.spinner
  - (1..100).each do
    %i
      %b
View Compiled
@import "compass/css3";

$particles: 100; // has to match nodes in dom
$particleSize: 6px;
$radius: 100;
$lapDuration: 3s;

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

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  
  perspective: 200px;
}

i {
  display: block;
  position: absolute;
  opacity: 1;
  
  b {
    display: block;
    width: $particleSize;
    height: $particleSize;
    border-radius: $particleSize;
    background: rgba(255,255,255,1);
    box-shadow: 0px 0px 14px rgba(255,255,255,1);
    
    animation-name: spin;
    animation-duration: $lapDuration;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
}

@for $i from 1 through $particles {
  i:nth-child(#{$i}) {
    $angle: ( $i / $particles ) * 360;
    
    transform:
      rotate( #{$angle}deg )
      translate3d( #{$radius}px, 0, 0 );

    b {
      animation-delay: $i * ($lapDuration / ( $particles - 2 ));
    }
  }
}

@keyframes spin {
  0% {
    transform: scale(1);
  }
  15% {
    transform: translate(-$particleSize/2, -$particleSize/2) scale(3);
  }
  50% {
    transform: scale(1);
  }
}
// Another spinner animation. 
// Not practical since it uses a ton of DOM elements, but it looks pretty :)

// by Hakim El Hattab | @hakimel

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.