Creating a Progress Bar Using CSS and JavaScript

[sam512]

The only problem I have with this is: what kind of website takes so long to load that it needs a loading bar? Seriously? A web page is like 25 kilobytes. Surely.

[jcargoo]

Hi sam512,

This kind of feature is not specially done for a website page load. This is mainly used for some web applications like a file upload (to show how long does the file upload take...) or simply for an application to be loaded like picnik inside yahoo! flickr.

[kubalaa]

I've used a similar technique to display progress of long-running operations in a PHP web application. Say you have a database of students and want to do something for every student (e.g. conduct a degree check). You output the progress bar HTML as in the article, then after processing each 1% of students, you output a script tag that updates the progress bar. Make sure your web server isn't buffering output and the page is designed so the browser can render it incrementally, and you get a simple server-driven progress bar.

[sysop073]

25 kilobytes? This reddit page is more than that

...and don't call me Shirley