<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js