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

If you just need the dots to appear one after another only once, try something very simple like the following:

Awaiting your selection
​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#message').append('.');
        dots++;
    }
}​

http://jsfiddle.net/fVACg/

If you want them to appear more than once (to be deleted and then re-printed), you can do something like the following:

Awaiting your selection
​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#dots').append('.');
        dots++;
    } else {
        $('#dots').html('');
        dots = 0;
    }
}​

http://jsfiddle.net/wdVh8/

Finally, checkout a tutorial I've written a few years ago. You might find it useful.