Demo

See the Pen Bubble Loader by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

Making It Move

Since svg is pretty sweet lets use that to create our loading circles. Also take note that we’re using a single svg element instead of separate SVGs to create our desired number of circles.

<svg height="14" width="100%" version="1.1" viewBox="0 0 100 100">
  <circle cx="-250" 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="350" cy="50" r="40"/>
</svg>

Using the JavaScript below we setup a new timeline called loader, make the timeline frames repeat once our animation has ended, and then reverse the timeline animation playback by using the yoyo property. Next we count how many circle elements are within the svg element and finally define an empty array with the bubbles variable. The reason we setup an array is because the first argument of staggerTo accepts an array of targets (more on that in a bit).

var loader     = new TimelineMax({ repeat: -1, yoyo: true }),
    svglength  = $('svg circle').length,
    bubbles    = [];

Now that we’ve defined our variables and counted the length of each circle element within the svg we can select each circle individually and push that grouping of selectors to the empty bubbles array we defined earlier.

for(var i = 1, l = svglength; i <= l; i++) {
  bubbles.push($('svg circle:nth-of-type('+ i +')'));
}

With each circle accounted for and selected the final piece is passing our bubbles array as an argument to the staggerTo method. The beauty of doing things this way is the fact that we can update our Markup by adding or subtracting circles and never touch the JavaScript because things are coded in a dynamic fashion in order to handle such an occasion.

loader.staggerTo(bubbles, .675, {
  css : {
    fill: 'none',
    opacity: 1,
    transform: 'scale(.75)'
  }
}, 0.25);

The rest of the settings I won't go into further detail, but I thought I would share the thinking behind this approach and use case for this animation method. Happy tweening campers.