14 DAY TRIAL // With the upcoming Firefox 6, now in the Aurora channel, Mozilla is adding support for an interesting HTML5 element, <progress>. As the name implies, the element can be used to display the progress of an action inside a web page. With most of the web today centered around applications, the element is clearly needed.
The way it's been implemented in Mozilla is interesting since uses the native progress bar from the operating system the browser is running on. This makes the progress bar instantly recognizable and perhaps helps with desktop integration.
The feature is only in the testing channel so it will be at least a couple of months until it lands in the stable Firefox version that hundreds of millions of people use. Still, it's only the third browser to support the <progress> element.
With the introduction of support for the feature, Mozilla also provided an example of how to use the progress element on its Mozilla Hacks blog.
"The <progress> element just landed in Firefox Aurora (to be Firefox 6). As its name indicate, this element can be used to give visual clues of anything in progress on a Web page: a set of resources being downloaded; a file being uploaded; a computing Web Worker; a WebGL scene being initialize," Mozilla's Louis-Rémi Babé wrote.
"Following is a simple demonstration of how the progress element can be used in conjunction with the FileReader API to create an ajax file uploader," he added.
The JavaScript and HTML code is embedded below and you can also check out the feature in action if you click on "Result" or hit the play button. Of course, it's only going to work if you're using Firefox 6 Aurora or another supported browser, meaning Chrome and Opera at this point.
As far as other browsers are concerned, Safari may get support eventually, since it's based on WebKit, the same layout used by Chrome, but there don't seem to be any plans to add support for the <progress> element in IE10.