Animate text/loading text animation.

[NardCake]

Hello! I'm creating a small little applications (command line type thing, got some ideas) and I was wondering how exactly I would portray loading of the sorts, I know the classic animation:

--
\
|
/
--

I just wanted to know how to animate that in Javascript. Just change the contents of an element every second or something? Any help is much appreciated.

[pritaeas]

You can use the setTimeout function to call a function at an interval. You can just store these characters in an array, and store the current index. In your function you replace the character with the next one.

[NardCake]

function run(){
setTimeout(animate(),500);
}
var chars = new Array('--','\\','|','/');
var num = 0;
function animate(){
    document.getElementById('loader').innerHTML = chars[num];
num++;
}

Like that? Not exactly working, it's just populating the element with the first character and never changing, probably doing something wrong? Any help is appreciated.

[pritaeas]

Docs. You need to call the setTimeout again in the animate function. It triggers only once. Another option would be to use setInterval.

[NardCake]

oic, thanks!