atebits.scss

@import "compass/css3";

$atebits-loader-size: 33px !default;
$atebits-loader-color: rgba(black, 0.5) !default;
$atebits-loader-speed: 8s !default;

$atebits-loader-segment: $atebits-loader-size / 11 !default;

@include keyframes(atebits-loader) {
  0%    { @include rotateZ(0deg); }

  3%    { @include rotateZ(90deg); }
  10%   { @include rotateZ(90deg); }

  13%   { @include rotateZ(180deg); }
  20%   { @include rotateZ(180deg); }

  23%   { @include rotateZ(90deg); }
  30%   { @include rotateZ(90deg); }

  33%   { @include rotateZ(180deg); }
  40%   { @include rotateZ(180deg); }

  43%   { @include rotateZ(270deg); }
  50%   { @include rotateZ(270deg); }

  53%   { @include rotateZ(180deg); }
  60%   { @include rotateZ(180deg); }

  63%   { @include rotateZ(90deg); }
  70%   { @include rotateZ(90deg); }

  73%   { @include rotateZ(0deg); }
  80%   { @include rotateZ(0deg); }

  83%   { @include rotateZ(-90deg); }
  90%   { @include rotateZ(-90deg); }

  93%   { @include rotateZ(0deg); }
}

/* :not(:required) hides this rule from IE9 and below */
.atebits-loader:not(:required) {
  background: $atebits-loader-color;
  display: inline-block;
  width: $atebits-loader-segment * 3;
  height: $atebits-loader-segment * 3;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;

  @include box-shadow(
    $atebits-loader-color (-4 * $atebits-loader-segment) (-4 * $atebits-loader-segment) 0 0,
    $atebits-loader-color ( 4 * $atebits-loader-segment) (-4 * $atebits-loader-segment) 0 0,

    $atebits-loader-color (-4 * $atebits-loader-segment) 0                              0 0,
    $atebits-loader-color ( 4 * $atebits-loader-segment) 0                              0 0,

    $atebits-loader-color (-4 * $atebits-loader-segment) ( 4 * $atebits-loader-segment) 0 0,
    $atebits-loader-color 0                              ( 4 * $atebits-loader-segment) 0 0,
    $atebits-loader-color ( 4 * $atebits-loader-segment) ( 4 * $atebits-loader-segment) 0 0
  );

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