flower.scss

@import "compass/css3";

$flower-loader-size: 40px !default;
$flower-loader-colors: #fd8 #e96 !default;
$flower-loader-speed: 5s !default;

$flower-loader-petal: nth($flower-loader-colors, 1) !default;
$flower-loader-center: nth($flower-loader-colors, 2) !default;

$flower-loader-segment: $flower-loader-size / 10 !default;
$flower-loader-dot-size: $flower-loader-segment * 4 !default;

@include keyframes(flower-loader) {
  0%   {
    @include rotateZ(0deg);
    @include box-shadow(
      white 0 0 15px 0,
      $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment
    );
  }
  50% {
    @include rotateZ(3 * 360deg);
    @include box-shadow(
      white 0 0 15px 0,
      $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
      $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment
    );
  }
}

/* :not(:required) hides this rule from IE9 and below */
.flower-loader:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;

  display: inline-block;
  width: $flower-loader-dot-size;
  height: $flower-loader-dot-size;

  background: $flower-loader-center;
  border-radius: 100%;
  @include box-shadow(
    white 0 0 15px 0,
    $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
    $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
    $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
    $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment
  );

  @include animation(flower-loader $flower-loader-speed infinite ease-in-out);
  @include transform-origin(50%, 50%);
}