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.

Grayscale Preloader

Following on from my last post on grayscale images, I've made another preloader to illustrate how you can animate an image from grayscale to colour.

The preload consists of an image and a loading label. The image starts off gray, and as the preloader progress value increases it gradually becomes coloured. The alpha value also increases from 0.5 at the start to 1 at the end. To spice it up a little I also added in a GlowFilter and a DropShadowFilter.

Here it is in action, click the RELOAD button to show the preloader again.



For another example of a custom preloader, check out this blog post on Another Custom Preloader.