Javascript "..." waiting dot looping with interval

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

I can't find a solution in vanilla javascript but here is the one made in jQuery:

• Loading Dots jQuery Plugin

See the demo here.

Answer 2

dots = document.getElementById('dots'); will get the DOM element you want to put dots in, and the innerHTML attribute of that element will let you manipulate the content inside it.

As for changing the content of the span on a specific interval, have a look at setInterval() and setTimeout(). You'll have to pick the one that best suits your needs.

I'm not going to post an actual solution since you haven't really showed any effort on this one, but this should point you in the right direction.

Answer 3

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