loading.gif ( but customized )

Question

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

Answer 1

No need jQuery:

<div id="loading"></div>

.

function loading(e, s, t) {
    const to = 200; // miliseconds
    if (arguments.length == 2) t = s;
    switch (s) {
    case '':
        e.innerHTML = '';
        loading(e, t, t);
        break;
    default:
        e.innerHTML += s.charAt(0);
        setTimeout(function() {
            loading(e, s.substr(1), t);
        }, to);
    }
}

loading(document.getElementById('loading'), 'NOW LOADING...');

http://jsfiddle.net/SHiNKiROU/Su2hy/

EDIT: I think you want dots padding on the loading message

<div id="loading" style="font-family: monospace;"></div>

.

function loading(e, s) {
        const to = 200; // miliseconds
        var x = 0;

        function helper(i) {
            var ht = '';
            for (var j = 0; j <= i; j++) {
                ht += s.charAt(j);
            }
            for (var j = i + 1; j < s.length; j ++) {
                ht += '.';
            }
            e.innerHTML = ht;
        }
        return setInterval(function() {
            helper(x++);
            if (x == s.length) x = 0;
        }, to);
}

var intv = loading(document.getElementById('loading'), 'LOADING');
// clearInterval(intv); when loading finished

http://jsfiddle.net/SHiNKiROU/Su2hy/9/

Answer 2

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/