Basic jQuery animation: Elipsis (three dots sequentially appearing)

Question

What I need:

I need an animated elipisis (...), one dot appearing after the other. The animation needs to loop. I\'d like to achieve this via jQuery

Animation

Answer 1

The following code is essentially what I ended up with.

JavaScript:

var animatedDot;
animatedDot = animatedDot || (function () {
    var dots = 0;
    var animatedDotInterval;
    var selectorAnimatedDot = ".animatedDot";

    return {
        start: function(interval) {
            if (!interval)
                interval = 400;

            animatedDotInterval = setInterval(this.nextFrame, interval);
        },
        stop: function() {
            if (animatedDotInterval)
                clearInterval(animatedDotInterval);
        },
        nextFrame: function() {
            if ($(selectorAnimatedDot).length) {
                if (dots < 3) {
                    $(selectorAnimatedDot).append('.');
                    dots++;
                } else {
                    $(selectorAnimatedDot).html('');
                    dots = 0;
                }
            } else {
                if (animatedDotInterval)
                    clearInterval(animatedDotInterval);
            }
        }
    };
})();

function animatedDotTimeout(timeout) {
    if (!timeout)
        timeout = 10000;

    animatedDot.start();

    setTimeout(animatedDot.stop, timeout);
}

Html:

Loading