Loading spinner with css. single element. no images.

css-loading-spinner.scss

/**
 * Inspired by lea verou's cleanest spinner.
 * http://lea.verou.me/2013/11/cleanest-css-spinner-ever/
 *
 * Configurable with 4 variables.
 * $closeness: gap between bars.
 * $length: length of each bars in px.
 * $thickness: thickness of each spinner bars.
 * $color: color of bars. In some color it won't work properly eg. "red".
 */
 
// Keyframe to rotate.
@keyframes spin {
	to { transform: rotate(1turn); }
}
 
// Mixin for spinner. 
 
@mixin spinner($closeness: 8px, $length: 10, $thickness: 3px, $color: #555) {
  $sh: ();
  $shadow: ();
  $w: $closeness;
  $n: $length;
  $k: floor($n*0.75);
  $f: floor($w*0.75);
  
  // Calculate box-shadow.
  @for $j from 0 through $length {
    $sh: $sh, 0 $j+($w) $color, $j+($w) 0 lighten($color, 30%), 0px (-$j)+(-$w) lighten($color, 50%), (-$j)+(-$w) 0px lighten($color, 62%);
  }
  @for $i from 0 through $k {
    $shadow: $sh, $shadow, $i+($f) $i+($f) lighten($color, 20%), (-$i)+(-$f) (-$i)+(-$f) lighten($color, 60%), $i+($f) (-$i)+(-$f) lighten($color, 40%), (-$i)+(-$f) $i+($f) lighten($color, 65%);
  }
 
  // Implements rules.
  width: $thickness;
	height: $thickness;
  box-shadow: $shadow;
}