View Full Version : A script that will display 1, 2 then 3 dots then return to 1 dot as a progress bar

Jul 23rd, 2002, 11:06 PM
Hi Guys

Whilst a page is loading (nothing at all to do with pre-loading images) I have a div(IE and NS6)/layer(NS4) displayed saying 'Please wait' (hidden when page finishes loading) from an external .js file. I want to add first one dot then two dots and finally three dots then retun to one dot etc etc after the 'Please wait' bit.

I've tried a few ways with for loops and arrays but can't get anything to work. I've seen a number of 'page loading' scripts but all are based up on pre-loading images, which is not the case here.

Can anybody give me a clue how to do this.

Jul 23rd, 2002, 11:36 PM
var timerHandle = setTimeout('Dots(1)',100);

function Dots(numberOfDots)
case 1:
theDivName.innerText = 'Loading.';
timerHandle = setTimeout('Dots(2)',100);
case 2:
theDivName.innerText = 'Loading. .';
timerHandle = setTimeout('Dots(3)',100);
case 3:
theDivName.innerText = 'Loading. . .';
timerHandle = setTimeout('Dots(1)',100);
<body onload="clearTimeout(timerHandle )">

Jul 24th, 2002, 12:27 AM
That works great, thanks a lot.

A little question .. When my original 'page loading' div is hidden when the page completes it's loading (I use body onload to call a function to hide the div) will the Dots function carry on or does the clearTimeout(timerHandle ) stop it. If this is the case then that does not happen.

I'm sorry if I'm being a bit thick here but I was just wondering.

Jul 24th, 2002, 12:52 AM
Whilst a page is loading...

Hey - you English or sumpin'? Impressive.
Dug this up:

<style type="text/css">

#progressbar {
font: 200 16px arial;
background: black;

<script type="text/javascript">

var progchar = '&amp;#187;'; //try '&amp;#149;&amp;nbsp;' or '&amp;#164;'
var speed = 111;

var color = new Array();
color[0] = '#440000';
color[1] = '#550000';
color[2] = '#661100';
color[3] = '#772200';
color[4] = '#883300';
color[5] = '#994400';
color[6] = '#aa5500';
color[7] = '#bb6600';
color[8] = '#cc7700';
color[9] = '#dd8800';
color[10] = '#ee9900';
color[11] = '#ffbb00';
color[12] = '#ffff00';

function prog() {
if (typeof prog.n == 'undefined') prog.n = 0;
var z = '', d = document.getElementById('progressbar');
d.style.color = color[prog.n];
for (i=0;i<=prog.n;i++) z += progchar;
d.innerHTML = 'loading, please wait ' + z;
prog.n = (prog.n == 12) ? 0 : ++prog.n;
progger = setTimeout('prog()',speed);

<body bgcolor="black">
<span id="progressbar"></span>
/* onload = function() {
document.getElementById('progressbar').style.visibility = 'hidden';

Jul 24th, 2002, 01:35 AM
Thanks Guys

Spoilt for choice now.

Yeah I'm English, (Watcha cocker, well I'll go t' bottom o' stairs, and stuff like that, old boy!!)

Toodle pip