throbber.scss

@import "compass/css3";

$throbber-loader-color: #dde2e7 !default;
$throbber-loader-highlight-color: #6b9dc8 !default;
$throbber-loader-height: 1.5em !default;
$throbber-loader-segment-width: 0.9em !default;
$throbber-loader-spacing: 0.7em !default;

@include keyframes(throbber-loader) {
  0%  { background: $throbber-loader-color }
  10% { background: $throbber-loader-highlight-color }
  40% { background: $throbber-loader-color }
}

/* :not(:required) hides these rules from IE9 and below */
.throbber-loader:not(:required) {
  @include animation(throbber-loader 2000ms 300ms infinite ease-out);
  background: $throbber-loader-color;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: $throbber-loader-segment-width;
  height: $throbber-loader-height;
  margin: 0 ($throbber-loader-segment-width + $throbber-loader-spacing);
  
  &:before, &:after {
    background: $throbber-loader-color;
    content: '\x200B';
    display: inline-block;
    width: $throbber-loader-segment-width;
    height: $throbber-loader-height;
    position: absolute;
    top: 0;
  }
  
  &:before {
    @include animation(throbber-loader 2000ms 150ms infinite ease-out);
    left: -($throbber-loader-segment-width + $throbber-loader-spacing);
  }
  
  &:after {
    @include animation(throbber-loader 2000ms 450ms infinite ease-out);
    right: -($throbber-loader-segment-width + $throbber-loader-spacing);
  }
}