Question

Instead of using an animated gif, I would like to instead have text in a span:

1. Waiting
2. Waiting.
3. Waiting..
4. Waiting…

I would like to loop through each and then return to the first in an infinite loop. I would also like to control the interval to speed up or slow it down. I’d like to have my HTML to be:

<p>Waiting<span id="dots"></span></p>

And simply cycle the span innerHTML. Thanks!

Answer 1

This would probably set you in the right direction. I think the code should explain itself.

function iterateDots(){
    var el = document.getElementById("dots");
    var dotsStr = el.innerHTML;
    var dotsLen = dotsStr.length;

    var maxDots = 3;
    el.innerHTML = (dotsLen < maxDots ? dotsStr + '.' : '');
}

function startLoading(){
    var intervalMs = 300;

    var interval = setInterval("iterateDots()", intervalMs);
}