Cool Javascript Progress Bar for HTML Web Page

Version 1.45

Last updated on
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. dlc_b

Download

Download
progress.js
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

Notes:

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

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

User Comments

There are 47 comments.

Displaying first 50 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

26. Posted By: Derek - - June 4, 2010, 3:16 pm
Why the progress bar go from 0 to 100 and then it jumps back to 98 then 99 and 100 and when it's 100 the window won't close?

27. Posted By: flotzy - - July 8, 2010, 2:55 pm
I needed it to work with iframes instead of images so I changed the 'image' on lines 157, 161 to iframe and it works EXCEPT the bar shows 100% at halfway and never closes.

Any way to correct these problems?

Thanks for the code!
.

28. Posted By: data recovery - - July 19, 2010, 3:03 am
i want to ask you one thing that after completion of progress bar if image not loaded then what is the instant solution for that ..

29. Posted By: Kishor - - September 16, 2010, 2:10 am
Superb..Mon!

I like it very much and i used it many places after reading and watching your tutorial....

Thanks a lot!

30. Posted By: Krisko101 - - September 17, 2010, 2:02 pm
I haven't tried it, but I would imaging that another way to do it so the loader recognizes the images is to create a div with the css style display:none, and place all the graphics you want as part of the calculation in that div.

31. Posted By: ellescuba - - October 24, 2010, 8:47 am
USE:

if (document.all) {
element = document.all[id];
else {
element = document.getElementById(id);
}
/* the following document element retreives the number of
images on the HTML document */
var image_count = element.length;

/* the following variable gets an array of all the images
in the document */
var image_array = element;

Load all the elements on the page

32. Posted By: anl289 - - January 3, 2011, 11:27 pm
I am interested in the function of this progress bar as I would like to show the image during the progress bar done. But how is it coming to progress like 15%, 30%, 45%, 60%, 75% and 100% and show the word"complete" in the right hand side of the image? Am I need to change the function of the following way:
var bar_perc=Math.Round(100 / image_count);
var image_count=document.getElementsByTagName("img").length; ?

33. Posted By: anl289 - - January 4, 2011, 7:09 pm
I mean that the progress bar in the page runs at 20% 80% 98% and 100%, how to change it to 15% 30% 45% 60% 75% and 100%?

34. Posted By: anl289 - - January 5, 2011, 6:45 pm
I make a progress bar with changing settings for example timeout and the math.round function and show more than 20 photos in the page but the bar still only display 0% and 100%. What is the problem and how to solve it?

35. Posted By: Jeff - - January 6, 2011, 9:46 am
@anl289,

The progress bar works fine with the the current code in progress.js. It is made to divide the amount of images on the page with 100. So if there are 20 images it will be divided into 20 parts each with 5% increments. So it will be 5% ... 10% ... 15% ... 20% . So, once one image loads then it goes to the next increment. However, as you know some images have smaller sizes than others and will load more quickly. So if a couple images load very quickly because their file size is smaller, you may not see the in between increments, it may jump quickly to the start of the next image. So it may jump to 20% ... 40% .. 60%... etc. If an image is taking a long time to load then it starts progressing the bar by 1% every second until it reaches the next part.

I do not know a formula to change it to go by 15's regardless of the amount of images in the page. The script is not meant to do that.

Jeff
www.seabreezecomputers.com

36. Posted By: amavib - - March 21, 2011, 10:18 am
Hi!

First of all a big thanks to the author for his valuable contribution to web society;) It really is a great piece of code especially useful to beginners like me.

The script works gr8, however it runs all the time when you browse through the web-site, meaning it displays progress bar even though images have already been cached and appear instantly. Is there a way to display the bar only first time the image is being loaded?

Thanks again for the work you have done!

37. Posted By: Barcode maker - - March 25, 2011, 4:13 am
This progress.js really helps a lot and reduces conflicts comes in way to download a page regarding speed.




38. Posted By: Jeff - - March 25, 2011, 10:00 am
@amavib,

The progress bar usually only doesn't close if your page breaks because there are javascript errors on the page. Run your page in Firefox and then in the menu bar click on Tools -> Error Console.

Fix any errors in your page and then the progress bar should close properly. Or send me a link to your page and I can take a loot at it.

Jeff
www.seabreezecomputers.com


39. Posted By: Johnny - - April 27, 2011, 4:37 pm
The way you can do this is with a JavaScript preloader. If you use Dreamweaver google "Dreamweaver Image Preloader". If you don't use dreamweaver google "Preload Images". Just preload that css background image and you're all set.



40. Posted By: mashary - - May 31, 2011, 3:11 am
COOL this is what i have been looking for like Gmail!!!

can you write as jQuery plug in? i would be appreciate :D

thanks a lot genius!!
Mashary Blog (like javascript progress bar)

41. Posted By: Rahul golatkar - - January 9, 2012, 11:00 pm
This Script is not working at my end...my application is in dot net...its shows 0% after loading page ...Y so? ....its urgent

42. Posted By: Rahul golatkar - - January 9, 2012, 11:41 pm
Urgent help ......

43. Posted By: Jeff - - February 13, 2012, 2:19 pm
@Rahul golatkar,

You need to provide a link to your page for us to be able to see what is going on. Usually this occurs on a broken page. A broken page is a page that does not load correctly because of javascript errors. If you are using Internet Explorer you will see a broken page icon when loading your page. Click on it and it will tell you what errors are on your page. Or better yet, use Firefox and click on "Tools", then "Web Developer" and then "Error Console" after loading your web page to see a list of errors.

Jeff
www.seabreezecomputers.com


44. Posted By: Vijay - - May 16, 2012, 12:12 am
Jeff, can you please send me sample code, because instead of images I want to use when the page loads with huge amount of data. As of now it is taking 15 mins in loading. So could you please send me sample application.

45. Posted By: Jeff - - May 16, 2012, 9:00 am
@Vijay,

Sorry, but the progress bar script only works with images. I don't know of a way to have a progress bar for data. If your page is taking 15 minutes to load, that is way too long. You need to break it up into pages. Only load part of the information and then have people press a Next page button for some more of it and so on.

Jeff
www.seabreezecomputers.com/

46. Posted By: Karfiol - - July 3, 2012, 6:24 am
That looks pretty old school at first sight, but some styling would help :)
I just tried an other slider( http://ruwix.com/simple-javascript-html-css-slider-progress-bar/ ), but this one is not clickable. I'm looking for one where I can click on it and returns the percentage.


47. Posted By: Mohammad Reza Mahmoodi - - February 15, 2014, 1:04 am
Hi Dear Friends..

thanx alot........very very gooooooooooooooood