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 sequence:

Frame 1: Awaiting your selection

Frame 2: Awaiting your selection .

Frame 3: Awaiting your selection ..

Frame 4: Awaiting your selection ...

What I've tried:

I've been researching a plugin to blink text and the pulsate .effect().

My question:

Does anyone have any reccomendations on the simplest and most reliable means of achieving this? I'd be happy to be pointed to a technique or function.

Solution 1

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

<div id="message">Awaiting your selection</div>​

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:

<div>Awaiting your selection<span id="dots"></span></div>​

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.

Solution 2

Beside StathisG's answer using jquery you can also achieve it through CSS3 using animation iteration count and animation-delay

@-webkit-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#loading {
    text-align: center; 
    margin: 100px 0 0 0;
}

#loading span {
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: opacity;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
}

#loading span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
}

#loading span:nth-child(2) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
}

#loading span:nth-child(3) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
}​

DEMO: http://jsfiddle.net/VXdhG/1/

Solution 3

I've written a simple JQuery plugin for it: https://github.com/karbachinsky/jquery-DotAnimation

//<div class="element">Loading</div>

$(function () {
    // Animation will start at once
    var $el = $('.element');

    $el.dotAnimation({
        speed: 300,
        dotElement: '.',
        numDots: 3
    });
});

JSFiddle example: https://jsfiddle.net/bcz8v136/