This is a test of a javascript progress bar.

Usually the slowest part on a page to load is the images. So the javascript file, progress.js, for this page uses the variable 'complete' on all the image elements to see whether they are done loading or not. For each image that is done loading it displays a progress indicator and a percentage. For more information just look at the javascript source. dlc_b

Download

Notes:

6/11/2018 - v. 1.5 - The progress bar window was too wide to display well in some mobile phone browsers. Fixed by limiting the entire progress bar window width to 320px. Also fixed a few other things like having the script detect window width and height instead of screen with and height in case a user has their browser set to not be full screen.

11/02/2014 - v. 1.45 - Decided to uncomment line 210 checkstate(); to check the readyState of the document more quickly in most browsers like Chrome, IE, Safari, Firefox, Opera. Therefore, the bar will now close more quickly in these browsers. Also upped the speed of updating the progress bar on line 218 and lowered the time for closing the bar completely in offbeat browsers on line 47.

4/13/10 - v. 1.4 - Bug fix from Martijn189 to help the bar not go past 100%. Added max-width to progress bar div and added a line to make percent only go to 100.

5/30/09 - v. 1.3b - Converted all html tags in the progress bar to lowercase so that it would be compatible with xhtml.

5/27/09 - v. 1.3 - The progress bar was not displaying correctly if doctype was strict. "http://www.w3.org/TR/html4/strict.dtd". Part of the problem was that strict doctype requires that top, left, height and width settings be followed by px. I went through progress.js and added + 'px' to every line that needed it including: document.getElementById('bar').style.width = new_width + 'px'; Now it seems to work fine in strict mode.

9/19/07 - v. 1.2 - Previously if you had a VERY large document and/or a lot of ads like adsense ads that were slow loading and/or a user was accessing your web page using dial-up, then the progress_bar() function would just count 1 or 2 images for the document even though there might be 5 or 6. When this happened the progress bar would close prematurely. So now there are added functions to make sure that the body of the document is completely loaded before we close the progress bar. That way the script can count the true amount of images on the page with var image_count = document.getElementsByTagName("img").length;.

With all browsers I could just use the window.onload function to find out if the document is done loading. But I did not want to rely on this function just in case you may be using it in your own javascript functions. If you are not using it then you can uncomment the line window.onload = saydone;. (For now I have a timer function set for these other browsers to close the progress bar. See the javascript file for info.)

For the most popular browsers (IE, Netscape, Firefox, Safari) I was able to use some built-in functions to check to see if the document was loaded.
For Internet Explorer and Safari:
if (document.readyState=="complete")
Then for IE we can have it listen for a readyState change with:
document.onreadystatechange=checkstate;
For Safari we do not have a onreadystatchange attribute so we have to periodically check the document.readyState value with a timer function. That is what progress_bar() is doing.
For Netscape and Firefox:
document.addEventListener("DOMContentLoaded", saydone, false);

9/18/07 - v. 1.1 - Previously if a very large image was loading then the progress bar would sit there at a certain percentage. Now the progress bar will move up 1% every second until the image is done loading or until the bar reaches the next bar_part's percentage (where it should be for the next image.)

9/6/07 - v. 1.0 - Progress Bar Created