Did you know browsers now have a built-in HTML tag for making progress bar?
How cool is that!
It is perfect for making web applications loading bar in just one line of HTML and a few Javascript code.
A progress tag will be displayed on recent browsers with a OS-native progress bar representing a loading. Like many HTML tag, if it is not supported, it fallbacks nicely by displaying its inner content. This fallback content should either be your own designed progress bar or simply display a percentage.
It is today supported by Firefox 9 , Chrome, Opera and IE10.
Example
<progress value="23" max="100">23 %</progress>
On your browser:
On Linux / Firefox (with GNOME)
On Mac OS / Chrome:
On IE 6:
Let’s see some cases:
waiting
<progress max="1000"></progress>
starting
<progress value="0" max="1000"></progress>
in progress:
<progress value="500" max="1000"></progress>
finished:
<progress value="1000" max="1000"></progress>
Making a download bar
When you need to load big resource like images, videos, or 3D materials, you usually want to display the progress of the download.
You could still do it using some divs and CSS Javascript, but this is now much simpler to use a :
One line of HTML:
<progress id="download"></progress>
And the Javascript:
(for more convenience, we are using jQuery)
var totalBytes = 10000000; // CHANGE ME WITH THE SIZE OF THE RESOURCE
var req = new XMLHttpRequest();
var progress = $('#download');
progress.attr("max", totalBytes);
req.addEventListener("progress", function (e) {
progress.attr("value", e.loaded).text(Math.floor(100*e.loaded/totalBytes) " %");
}, false);
req.addEventListener("load", function (e) {
// THE RESOURCE IS LOADED
progress.replaceWith("Downloaded!");
});
req.open("GET","resource.dat",true);
req.send();
It is quite easy to extend my code to support multiple files to download.
It is also easy to use this progress bar for anything else, but remember it represents a progress. If you want to represent some kind of stats, refer to the dedicated tag.