Search code examples
jquerycssanimated

loading.gif ( but customized )

I know the various websites around the tinternet, that allow you to customize a loading.gif etc, but what I wanted to know...

Is there a way, aside from creating a gif with adobe etc, to create custom text loading...

So instead of the ubiquitous spinner, you can specify text that animates whilst an image loads.

I have searched high and low, and not found anything. Nearest I got was a jquery spinner, but thats not what I am after.

Wondered if any of you guys had come across this before. If so, what did you do to customize it..

Example:

Sometimes you may see the following animated ( as a gif )

L......

LO.....

LOA....

LOAD...

LOADI..

LOADIN.

LOADING

I know the above is done by creating a loop of animations, but wondered if there was a more upto date method of creating custom loading messages, perhaps using jquery ... I have seen it done in flash etc

Solution

  • something like this ?

    var $ld = $('#loading');
var idx = 1;
var msg = "Loading..";
var loader = setInterval(function(){
    $ld.text(msg.substr(0,idx));
    idx++;
    if (idx > msg.length)
        idx=1;
},100);

    and call clearTimeout(loader) when done.

    demo: http://www.jsfiddle.net/gaby/5CVQu/