Text Animation with 3 dots Flex

A popular animation that anyone would come across several places, applications or even web pages would be a "Loading..." animation. Some would use progress indicator, and some goes on until it is complete. The type of animation getting used varies according to the requirement. This post discusses animating the Loading with three dots followed by it. There are other possible ways to create the same output other than the one explained here. The one presented here is the author's idea.

The intended animation starts with the text "Loading", then appears a dot, then the next and then the next [total of three], and all dots go off and starts from beginning. In the four states, the text is as follows
  • Loading
  • Loading.
  • Loading..
  • Loading...
To be simple, lets put on a Label

<s:Label x="100" y="100" fontSize="18" text="Loading" id="lblLoad" />

Just wanted the animation to start as the loading of the application completes and hence included applicationComplete="init()" as part of <s:Application> tag.

A bunch of operation like initializing few variables, timer, starting the timer etc has to be done in the init() function

import flash.events.TimerEvent;
import flash.utils.Timer;

private var t:Timer;
private var i:Number;

public function init():void
    t = new Timer(1000, 0);
    t.addEventListener(TimerEvent.TIMER, animate);
    i = 0;

i is the iteration variable [in other words, it denotes the current state of the animation], which here actually plays a vital role because based on the variable, the animation proceeds. Say i = 0 corresponds to the state 0 where only the text has to be displayed, i = 1, 2 ,3 adds respective amount of dots to the text and display it. Considering the above logic, the function is as follows

public function animate(e:TimerEvent):void
    var j:Number;
    var s:String = "Loading";

    for (j = 0; j < i; j++) {
        s += ".";

    i = (i + 1) % 4;

    lblLoad.text = s;

The four states are shown below from the output.


1 comment: