Thursday, May 19, 2011

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: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.

2 comments:

JabbyPanda said...

Nice work, we are using something similar to display "indefinite" page preloaders on our project based on Flex 4.1 SDK

BTW, Flex 4.5 SDK has got an welcome addition of BusyIndicator UI component, just found out today http://fusiongrokker.com/post/using-the-flex-4-5-busyindicator

Chris Callendar said...

Thanks for sharing, I didn't know that was part of Flex 4.5. I've added link above.