Loading.gif (but tuned)

Question

I know various sites around tinternet that allow you to configure load.gif, etc., but what I wanted to know ...

Is there a way, besides creating gifs with adobe, etc., to create a custom text download ...

So, instead of the ubiquitous counter, you can specify text that animates while the image is loading.

I searched high and low, and found nothing. The closest I got was a jquery spinner, but that’s not what I want.

I wonder if any of you have met you before. If so, what did you do to configure it.

Example:

Sometimes you can see the following animated (like gif)

l ......

LO .....

LOA ....

LOADING...

LOADI ..

LOADIN.

DOWNLOADS

I know this was done by creating an animation loop, but I wondered if there was an even more modern method for creating custom downloadable messages, possibly using jquery ... I saw this in flash, etc.

Answer 1

something like that?

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/

Answer 2

No jQuery needed:

 <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 need to fill in the points in the download 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 3

There is this jQuery plugin from CSS tricks.