I wanna create some loading dots, like this:
At 0000 miliseconds the span content is: .
At 0100 miliseconds the span content is: ..
At 0200 miliseconds the span content is: ...
In a loop.
What is the best / easiest way to make it?
<span id=wait>.</span>
<script>
var dots = window.setInterval( function() {
var wait = document.getElementById(wait);
if ( wait.innerHTML.length > 3 )
wait.innerHTML = ;
else
wait.innerHTML += .;
}, 100);
</script>
Or you can get fancy and have them go forward and back:
<span id=wait>.</span>
<script>
window.dotsGoingUp = true;
var dots = window.setInterval( function() {
var wait = document.getElementById(wait);
if ( window.dotsGoingUp )
wait.innerHTML += .;
else {
wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
if ( wait.innerHTML === )
window.dotsGoingUp = true;
}
if ( wait.innerHTML.length > 9 )
window.dotsGoingUp = false;
}, 100);
</script>
Or you could make them go back and forth randomly:
<span id=wait>.</span>
<script type=text/javascript>
var dots = window.setInterval( function() {
var wait = document.getElementById(wait);
if ( Math.random() < .7 )
wait.innerHTML += .;
else
wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
}, 100);
</script>
Or I could get a life and stop posting additional snippets.... :D
As Ivo said in the comments, you need to clear the interval at some point, especially if you are not loading a new page after the waiting is finished. :D
