Simple rotating preload icon class

A common requirement in applications is to have a small icon that can be used to indicate that some processing or a request is carried out, but not an actual preloader indicating progress.

On most projects lately I have been supplied graphical assets for the typical circle of lines with a rotating fade effect. In most cases a simple class not requiring any graphical assets would have sufficed, so I decided to make one:

package com.blixtsystems.utils


import com.greensock.plugins.TintPlugin;

import com.greensock.plugins.TweenPlugin;

import com.greensock.TweenLite;

import flash.display.Sprite;


import flash.geom.ColorTransform;

import flash.utils.Timer;


* Circle of lines with rotating fade effect

* @author


public class PreloadIcon extends Sprite


private var _color1:uint;

private var _color2:uint;

private var _w:int;

private var _speed:int;

private var _numLines:int;

private var _thickness:Number;

private var _lineLength:Number;

private var _rotationStep:Number;

private var _currLine:int = 0;


* Create preload icon

* @param color1 color

* @param color2 highlight color

* @param w width of central circle

* @param lineLength length of lines

* @param speed number of seconds for one rotation

* @param lines number of lines

* @param thickness thickness of lines


public function PreloadIcon(color1:uint, color2:uint, w:int, lineLength:Number, speed:Number=2, lines:int=12, thickness:Number=6)


_color1 = color1;

_color2 = color2;

_w = w;

_lineLength = lineLength;

_speed = speed;

_numLines = lines;

_thickness = thickness;

_rotationStep = 360 / _numLines;



private function draw():void



var line:Sprite;

var step:Number = (Math.PI * 2) / _numLines;

var theta:Number;

var angle:Number;

for (var i:int = 0; i < _numLines; i++)


line = new Sprite();, _color1); 0, _lineLength); = "line_" + i;


theta = step * i;

line.x = _w * Math.cos(theta);

line.y = _w * Math.sin(theta);

line.rotation = (i * _rotationStep)-90;


var timer:Timer = new Timer((_speed/_numLines)*1000);

timer.addEventListener(TimerEvent.TIMER, handleTimer, false, 0, true);



private function handleTimer(e:TimerEvent):void


var line:Sprite = getChildByName("line_" + _currLine) as Sprite;

var ct:ColorTransform = new ColorTransform();

ct.color = _color2;

line.transform.colorTransform = ct;, _speed, { tint:_color1 } );


if (_currLine == _numLines)


_currLine = 0;





You do need TweenLite included in your project. Input parameters are explained in the source.