Circular Preloader Animation (GSPreloader)

See the Pen GSPreloader by GreenSock (@GreenSock) on CodePen.

I had some fun creating a simple little preloader animation with spinning dots that animate in/out with a single JS call. This is what we're using on the new GreenSock.com. All it does is:

• Create a certain number of DIVs (you decide how many) with border-radius:50% to make them circular
• Offsets their transform-origin to whatever radius you define
• Rotates each one to disperse them around a big circle
• Drops them into a wrapper DIV that's fixed-position, centered perfectly in the window with a high z-index
• Creates a repeating/looping TimelineMax instance for each dot, animating its rotation "-=360" (360 less than whatever it starts at, thus one full rotation around the bigger circle) and then its skew by "+=360" (this is what makes it appear to "flip")
• Place each dot's TimelineMax into a master TimelineLite instance in a slightly staggered fashion. This TimelineLite serves as the container for the whole animation, making it simple to control as a whole.
• To animate out, the main TimelineLite gets paused, and a new tween for each dot animates it from wherever it happens to be, off the screen in a cool way (again, slightly staggered).

This would be pretty tough or impossible to do with pure CSS.

Features

• Completely customizable - use the config object to define the number of dots, the size of the dots, the radius of the circle, the colors (as many or as few colors as you want), the opacity and border of the background box, etc.
• Pure JS. Copy one JS function, and make sure you load TweenLite and CSSPlugin (or just TweenMax which has both), and you're good-to-go
• Automatically centers itself in the window and sets the container's z-index to 200
• Call your preloader's active() method to turn it on or off. preloader.active(true) turns it on, preloader.active(false) turns it off, and you can check its status using preloader.active() (no parameter).