That’s quite a topic. “A customizable gradient circle loader / animation for AS3“. I wrote it then looked at it and couldn’t help giggling. Aaaanyway. You know the one, we’ve all seen it. From the worst sites to the best sites, every now and then you see that circle that spins with an internal gradient. Like a snake trying to eat its own tail.

Most commonly these are bitmaps. Pngs exported from PS that are rotated. The problem with that is that it becomes pretty rigid. If you need to change the width or height or whatnot, you’re quickly faced with re-exporting a new one. Actually more or less the same thing goes for those that took the time to make it with Illustrator. Once you are faced with increasing the inner radius and not the outer, or vice versa - you gotta redo it.

Soooooo, without further adieu, here’s a scripted version that uses the drawing API to construct a circle that is fairly customizable. You can use it as a loading animation or just .. just a spinning circle because how cool aren’t spinning circles? Much much cooler than fireflies, for sure!

Alright so, it’s a class. The class has three public functions. The constructor creates the initial circle with your arguments (inner and outer radius, rotation speed, color) and after that you can call a start() method to make it visible and start spinning. Alternatively, stop() shuts it down and makes it non visible, but it does NOT remove it from memory, you can restart it again. It just clears the listeners. If you want to kill it, you need to remove the instance from the displaylist.

public function SnakeCircle(_radius:int, _circleSize:int, fillColor:uint, speed:Number, direction:String = “CLOCKWISE”):void

The sliders are (top to bottom): Speed, Inner Radius, Outer Radius. Also a little cute colorpicker. Click the circle to change direction

All that remains now is the Download Link (300Kb) (1263 downloads)

(I know, 300k wtf right!?! Friggin components… not to worry though, the swf is 17 kb :P)