Simple Animating Preloader and Throbber/Spinner

This is my fourth post on Flex preloaders. It shows how you can use a throbber or spinner as a
simple yet effective preloader. The throbber can also be used in your application in other places whenever you want to indicate that something is happening.

In the example below I've included two kinds of throbbers:

• SimpleThrobber (extends Sprite) - ActionScript/Flash only, no Flex dependencies (good for preloaders)
• Throbber (extends SkinnableContainer) - advanced throbber, skinnable and style-able

I've also included two skins to go with the Throbber class - ThrobberCirclesSkin and ThrobberLinesSkin.

Both throbbers work roughly the same way. The animation is performed every X milliseconds, and the lines or circles are drawn in a rotating manner so that the throbber animates. Both throbbers support an array of colors which define the appearance of the throbber, and a delay property which determines the speed of the animation.

Anyway, check out the code below (right click View Source to see the source), there is some documentation to explain the various styles, properties, and functions.


The other blog posts I've written on preloaders and spinners/throbbers can be found here:

• Another Custom Preloader
• Showing Preloader Again
• Grayscale Preloader
• Tree Icon Spinner

As mentioned in the comments, the just released Flex 4.5 SDK now contains a similar Spark BusyIndicator component. There is a nice blog post on it here.