jQuery text loading animation

Question

Trying to make a text ... loading animation

here's where I stand: http://jsfiddle.net/aGfct/

I can get the ... to be added at 500 ms intervals, but then I want to remove them and then start the animation over / until loading is done (basically it can loop forever, and I will fade it out when done).

Any help would be great.

Thanks.

_charlie

Answer 1

i = 0;
setInterval(function() {
    i = ++i % 4;
    $("#loading").html("loading"+Array(i+1).join("."));
}, 500);

If you wish to change the string after 5 says, that's after 10 iterations. This can be accomplished like this.

i = 0;
text = "loading";
setInterval(function() {
    $("#loading").html(text+Array((++i % 4)+1).join("."));
    if (i===10) text = "start";
}, 500);

Answer 2

http://jsfiddle.net/paska/aGfct/12/

var originalText = $("#loading").text(),
    i  = 0;
setInterval(function() {

    $("#loading").append(".");
    i++;

    if(i == 4)
    {
        $("#loading").html(originalText);
        i = 0;
    }

}, 500);