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

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/