whirly.scss

@import "compass/css3";

$whirly-loader-size: 64px !default;
$whirly-loader-color: #e66 !default;
$whirly-loader-speed: 1.25s !default;

$whirly-loader-radius: $whirly-loader-size / 2 !default;
$whirly-loader-dot-size: $whirly-loader-size / 8 !default;

@include keyframes(whirly-loader) {
  0%   { @include rotateZ(0deg); }
  100% { @include rotateZ(360deg); }
}

/* :not(:required) hides this rule from IE9 and below */
.whirly-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  
  display: inline-block;
  width: $whirly-loader-dot-size;
  height: $whirly-loader-dot-size;
  
  background: transparent;
  @include border-radius(100%);
  
  $shadows: comma-list();
  $angle: 0deg;
  
  @while $angle < 360deg {
    $size: (18px - ($angle / 10deg * 1px)) / 3;
    $radius: $whirly-loader-radius - $size;
    $x: $radius * sin($angle);
    $y: $radius * cos($angle);
    $shadows: append($shadows, $whirly-loader-color $x $y 0 $size);
    $angle: $angle + 2deg;
  }
  
  @include box-shadow($shadows);
  
  @include animation(whirly-loader $whirly-loader-speed infinite linear);
  @include transform-origin(50%, 50%);
}