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.

Tree Icon Spinner (not using animated gif)

I've been disappointed that Flex doesn't natively support animated gifs. I especially wanted to use them inside Flex Trees when I'm loading the children dynamically. So instead of trying to get animated gifs to work (see this example if you are interested) I created a relatively simple Spinner class that draws a circular spinner using just Flex Graphics. The spinner is animated using a Timer. If you set the startImmediately property to true then the animation starts when the spinner component is added to a parent component. And it is always stopped when it gets removed from its parent.
There are also the start(), stop() and running functions to control the spinner manually.

The spinners have a few styles that you can set to customize the appearance:

<ui:Spinner
  Properties
delay="100"
startImmediately="false"
Styles
backgroundAlpha="1"
backgroundColor="NaN"
spinnerColor="#829AD1"
spinnerHighlightColor="#001A8E"
spinnerThickness="3"
spinnerLineThickness="2"
spinnerType="gradientcircle"/>

I've created an example of the four types of spinners in four Trees. Each tree node loads its children after a 2 second delay during which time the spinner is shown, so try expanding each tree (right click to view source):


Let me know if you like them!

Also, make sure you do call stop() on the spinner when you don't need it anymore... otherwise you might notice your Flex app starts to run very slowly like mine did...

** September 28th 2009 Updated **
I've added another example application showing how to show the spinner inside an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API