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.

Recommended Answers

All 4 Replies

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.

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.

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

oic, thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.