Punctuation loading “animation”, javascript?

Question

I\'m looking for a good way to display some punctuation loading \"animation\".

What I want is something like this:

This will display at second 1: \"Waiti         


        

Answer 1

Here is a pretty simple variant: http://jsfiddle.net/psycketom/FusdC/

Read the comments below to understand what everything is doing there.

var span = $('.dots'); // take the element where you have the maximum count of dots
var text = span.text(); // cahce it's text value

// we set up a function here, so we can loop it all the time
var loading = function()
{
    $({
        count : 1 // we start at one dot
    }).animate({
        count : text.length // together forming all of it
    }, {
        duration : 1000, // make the animation complete in one second
        step : function() {
            span.text( text.substring(0, Math.round(this.count)) ); // on each step, change the text accordingly to current iteration
        },
        complete : function() {
            loading(); // once complete, start all over again
        }
    });
};

loading(); // start it up for the first time

Here you also gain the advantage of using easing if you wish, easily changing total duration and bunch of other benefits in case you're good with jQuery.