Put the Loading... text with animated dots

There are times where you navigate to a page and you see the "Loading..." text with moving three or so dots like this

Loading

and you wonder how they did it.

Here is how
Copy and paste the following code to where you wish for it to appear inside you page

<span id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

You may replace the value 300 (in red text) to a value you wish. 300 means 300 millisecond or 0.3 second interval between each appearance of the dot so naturally the higher value you put in, the longer it will take for each dot to appear and vice versa.

You may also wish to add some format to the text like making the font size 40px and color gray. You can put an inline CSS at the span tag like this:

<span style="color:gray;font-size:40px;" id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

And the result will be like this:

Loading

Back to CyberLiving home page

Other Posts
Add your profile photo in search results
Using Google Spreadsheet as a query-able table using Javascript