<svg version="1.1" viewBox="0 0 100 100">
  <circle cx="-400" cy="50" r="40"/>
  <circle cx="-400" cy="50" r="40"/>
  <circle cx="-250" cy="50" r="40"/>
  <circle cx="-100" cy="50" r="40"/>
  <circle cx="-100" cy="50" r="40"/>
  <circle cx="50" cy="50" r="40"/>
  <circle cx="200" cy="50" r="40"/>
  <circle cx="200" cy="50" r="40"/>
  <circle cx="350" cy="50" r="40"/>
  <circle cx="500" cy="50" r="40"/>
  <circle cx="500" cy="50" r="40"/>
  <circle cx="650" cy="50" r="40"/>
</svg>

@import "compass/css3";

// Demo Styles
body,html{height: 100%;}body{background:#252525;display: flex;align-items: center;justify-content: center;flex-direction: column;}svg:not(:root){overflow: visible;}


// Bubble Loader Styles !REQUIRED!
$bubble-height: 14px;
$bubble-fill: #87ce02;

svg {
  height: $bubble-height;
  width: 100%;

  circle {
    fill: $bubble-fill;
  }
}

var loader          = new TimelineMax({ repeat: -1, yoyo: true }),
    circles         = $('svg circle'),
    stagger_options = {
      opacity: 0,
      y: -800,
      ease: Elastic.easeInOut
    };

loader.staggerTo(circles, 0.875, stagger_options, 0.025);