Trying to make a text ... loading animation

here's where I stand: /

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

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

• javascript
• jquery
• html

• No need for a gif. I just want to have the dots "animation" cycle until loaded. – stursby Commented Dec 16, 2011 at 16:58

5 Answers 5

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);

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);

I have a solution very similar like roXon, only in my case 2 features I have added.

1. Just add an blank elemnt with id=loadingDots, like span id="loadingDots">
2. Add the function call in document.ready. Now in my case I needed to display the loading dots in some pages but not all. So, the function will look for the element with id=loadingDots, and if not found, will clear the interval.

Demo in JsFiddle

[HTML]

<!--Just have an element with id=loadingDots-->
<span style="font-size:42px">Sending<span id="loadingDots"></span></span>

[JS]

$(document).ready(function(){
    /**Call the function in document.ready somewhere*/
    showLoadingDots();
});

The function

var showLoadingDots = function() {
    /**If element not found, do nothing*/
    if (!$("#loadingDots").length>0) return false;

    var showDots = setInterval(function(){            
        //Thanks to roXon, StackOverflow
        var d = $("#loadingDots");
        d.text().length >= 3 ? d.text('') : d.append('.');
    },300);
}

Hope it helps somebody. Thanks roXon, for ideas.

Try using setInterval also so like:

setInterval(function(){
    for (i = 1; i <= 3; i++) {
        setTimeout(function() {
        $("#loading").append(".");
        }, i * 500);
    }
    $("#loading").html('loading');
}, 2000);

Just add this line at the end of your loop:

i = (i === 3) ? 0 : i;

That's just shorthand for saying 'if i is equal to 3, set it back to zero, else leave it as it is'. That should kick off your loop all over again until you set an exit condition.

EDIT: Hold on, I didn't actually look at how you appended the .(sorry, can't get jsFiddle to run anything at the moment)! If you were to use the i reset as above, you'd really need to set the number of . characters equal to i with every iteration.

EDIT 2: Looking again, you'd even need to take i into a closure to get its value at the time the setTimeout is declared, otherwise you'll get whatever value it is when setTimeout is executed, which is unpredictable. Basically, don't use this solution - use Jeff's! ;)