Cool Javascript Progress Bar v. 1.4

Created: September 6, 2007
Last Edited: April 13, 2010
Subscribe to Internet Tips and Tools Feed

This is a test of a javascript progress bar.

This is the closest thing you can get to a real loading bar with Javascript and HTML. To see the progress bar again in your browser, reload the page without having the browser cache the images by pressing CTRL+F5.

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. Right click on the link and click on "Save Target As..." progress.js

Notes:

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

Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed

User Comments

There are 47 comments.

Displaying first 25 comments.

1. Posted By: Kevin - - May 26, 2008, 9:37 am
You are a genius! I've been trying to solve this for a while on politicalbull.net because we have a lot of content to load in very search engine friendly manner. This did the trick. Thanks.

2. Posted By: sdfsd - - July 9, 2008, 5:32 am
fsdf

3. Posted By: bilumon - - September 19, 2008, 2:49 am
i cant able to stop loading of progrees precentage it goes beyond 100% and on....please help me to solve this problem..

4. Posted By: prakjava - - September 24, 2008, 2:50 am
Very nice and instructive !!

5. Posted By: payo - - September 26, 2008, 12:18 am
hey, its very good, i was looking for something like this a long time... thx

i have only one problem - on some pages its finishing on 98%, what is ok, but others are finishing on 111% or above

what to do with it? can you fix it?

anyway thx



6. Posted By: anti-alias - patiwat-ounon@hotmail.com - September 29, 2008, 3:55 am
Thanks!

7. Posted By: zzz - - December 5, 2008, 4:27 am
cool and cute
thanks
bye

8. Posted By: Daniel - - December 7, 2008, 12:00 pm
Hi, thanks for the easy design! It seems to work better than most of the other (to complicated) stuff around. The only problem I have is with loading a page in an iframe. There seems to be some sort of missing signal to the loader when a page is loaded into an iframe. Do you have an idea of what could be wrong?

9. Posted By: Daniel - - December 10, 2008, 1:27 pm
Can you put the whole HTML code instead of bits of it?

10. Posted By: Henray - asdfasdfasdfasdfasdfasdf@gmail.com - March 23, 2009, 9:20 am
yadada

11. Posted By: jeff - - April 3, 2009, 9:23 pm
thank you

12. Posted By: www.highwoodcollege.org - Emmanuel Higgins - - May 19, 2009, 10:14 pm
Great stuff!

But This will only work for

My webpage was XHTML STRICT and it didn't work until I changed it to HTML 4.01 Transitional

13. Posted By: Emmanuel - - May 20, 2009, 9:22 pm
I'm really dissapointed :( It only works if you have a certain doctype and if you don't specify the http for the doctype eg "http://www.w3.org/TR/html4/loose.dtd" SO if you leave the http out of the doctype then it works, otherwise it doesn't work... alhthough the javascript still works and it counts the loading ok, but it doesn't show the loading bar... can you please help?
There must just be some html or something wrong in it to not show if I add the doctype http

14. Posted By: Emmanuel - - May 21, 2009, 12:42 am
Problem is: IE displays my page out of alignment if I don't put the HTTP in the doctype

15. Posted By: sim - sim4800@yahoo.com - May 22, 2009, 10:11 am
My problem with program is that the progress bar goes up to about 160% - 180% before it stops.

Can someone tell me how to stop displaying the %. I prefer displaying the bar only without the wrong %

Thank you


16. Posted By: Emmanuel - - May 27, 2009, 6:17 pm
Great work Jeff! Thank you so much for helping with my problem!

17. Posted By: Jeff - - May 28, 2009, 9:54 pm
Your welcome, Emmanuel.

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.

Jeff
www.seabreezecomputers.com


18. Posted By: TDX JAKIRO - - June 5, 2009, 6:11 pm
Thank You, I success on my website. ^^

EXAMPLE
my game blog

19. Posted By: mitchel - - September 15, 2009, 11:39 am
LOL

I reload the page and it goes from 0% to 101% to 36% and goes then away before the page is loaded

20. Posted By: Punit - - November 20, 2009, 6:11 am
Thanks

this is very good but i want progress bar until my whole page is loaded

21. Posted By: Ron Halliday - - December 29, 2009, 10:51 am
Hi there, I just wanted to let you know, based on your program, that I have found a way to reflect the percentage loaded a little bit more accurately. I manually put the size of each image in KB as its ALT description. From there I can calculate the percentage as:

KB of images loaded / total KB of all images

I am using the ALT tag because it is fastest, and because the page does not load before all images are loaded, so no one will see it. There are lots of other ways these values can be stored as well.

22. Posted By: glenn - - January 16, 2010, 5:59 pm
this is greate. this is what im looking for.. thank you

23. Posted By: Martijn189 - - April 13, 2010, 1:42 am
Oh, i figured out how to stop the progressbar from exeeding 100% and breaking out of the duv box.

open the .js file and add the below line to the part where the bar is setup (line 126):

--------
+ ';max-width: ' + bar_width2 + 'px'
--------

And finaly add the below line arround line 218, so that the percentage can never exeed 100:

--------
if (percent > 100) { percent = 100; }
--------

Thanks for this wonderful script



24. Posted By: kamah - - June 2, 2010, 1:06 am
Nice script, long time needed.
I just have a question : I try to use it in a site where the heaviest images are background images loaded by the .css, but the script doesn't detect it... could it be possible to check the .css too for images to load ?
If you have a solution, it would be great !

25. Posted By: Jeff - - June 2, 2010, 5:22 pm
Kamah,

That is a good question. I'm sorry, but I don't have an answer. I cannot find any solutions to see when a .css background image is loaded. It is usually best practice to not make background images complicated but to have a small pattern and then repeat it. Having said that, there is a solution mentioned on a website. You could use javascript image preloading for the images. This has pros and cons of course:
stackoverflow.com/questions/1560750/javascript-event-css-background-image-loaded

Jeff
www.seabreezecomputers.com