wobblebar.scss

@import "compass/css3";

$wobblebar-loader-size: 128px !default;
$wobblebar-loader-speed: 15000ms !default;
$wobblebar-loader-color: #a9d !default;

@include keyframes(wobblebar-loader) {
  0%  { left: ($wobblebar-loader-size / 32); }
  3%  { left: (26 * $wobblebar-loader-size / 32); }
  
  6% { left: ($wobblebar-loader-size / 32); }
  9% { left: (26 * $wobblebar-loader-size / 32); }
  
  12% { left: ($wobblebar-loader-size / 32); }
  15% { left: (26 * $wobblebar-loader-size / 32); }

  18% { left: (8 * $wobblebar-loader-size / 32); }
  
  27% { left: (8 * $wobblebar-loader-size / 32); }
  30% { left: (26 * $wobblebar-loader-size / 32); }
  
  
  33%  { left: ($wobblebar-loader-size / 32); }
  36%  { left: (26 * $wobblebar-loader-size / 32); }
  
  39% { left: ($wobblebar-loader-size / 32); }
  42% { left: (26 * $wobblebar-loader-size / 32); }
  
  45% { left: ($wobblebar-loader-size / 32); }
  48% { left: (26 * $wobblebar-loader-size / 32); }

  51% { left: (13 * $wobblebar-loader-size / 32); }
  
  63% { left: (13 * $wobblebar-loader-size / 32); }
  
  66%  { left: ($wobblebar-loader-size / 32); }
  69%  { left: (26 * $wobblebar-loader-size / 32); }
  
  72% { left: ($wobblebar-loader-size / 32); }
  75% { left: (26 * $wobblebar-loader-size / 32); }
  
  78% { left: ($wobblebar-loader-size / 32); }
  81% { left: (26 * $wobblebar-loader-size / 32); }

  84% { left: (18 * $wobblebar-loader-size / 32); }
  
  94% { left: (18 * $wobblebar-loader-size / 32); }
  97% { left: (26 * $wobblebar-loader-size / 32); }
}

/* :not(:required) hides this rule from IE9 and below */
.wobblebar-loader:not(:required) {
  background: $wobblebar-loader-color;
  @include border-radius($wobblebar-loader-size / 12);
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
  width: $wobblebar-loader-size;
  height: ($wobblebar-loader-size / 6);
  position: relative;
  
  &::after {
    @include animation(wobblebar-loader $wobblebar-loader-speed infinite ease);
    background: white;
    display: block;
    @include border-radius(2 * $wobblebar-loader-size / 36);
    content: '';
    position: absolute;
    top: ($wobblebar-loader-size / 36);
    left: ($wobblebar-loader-size / 32);
    width: ($wobblebar-loader-size / 6);
    height: (4 * $wobblebar-loader-size / 36);
  }
}