Friday, 10 June 2011

HTML5: the progress element


Progress bars have always been a needed element in web applications. Every time a user sends requests to the server, it is quite usual that some sort of immediate response is needed, just to make the user aware that something's really happening and that the whole application is not just frozen. In the past, we used JavaScript and CSS to show some sort of progress bar. We usually used animated gifs like
and many sites still use those kind of solutions.
With HTML5, a new element has been introduced. It is progress and it will give us a new way to show the user that something's really going on after that button has been pressed.
"The HTML progress (<progress>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar." (quote from Mozilla Developer Network).

The basics
The <progress> tag is very simple. It has two attributes:
1) value, which indicates the present value;
2) max, which indicates the maximum value of the element.
So we can insert a progress tag the following way:
<progress value="10" max="100" id="progBar">10</progress>
Which will look like:
Nothing very interesting. But, if we want we can style the progress tag with CSS and give it a good look. Oh, by the way, if you're using Chrome as browser, the above should be already styled as a progress bar (grey background and green filling). As of now, Chrome already supports the tag, while Firefox 6.0 will. Eventually even Internet Explorer, Safari and Opera will support the progress element.

How to update it
Now... You might wonder how to make the progress bar a real one. Because from what we saw above, our progress bar is not really reacting to anything: it is a static element. We can change its value with JavaScript.
Using a simple function, we can change the value. The following is just an example:
<script type="text/javascript" language="javascript>
function addOne() {
    var pb = document.getElementById("progBar");
    pb.value += 1;
The above function (addOne) will add 1 to the value (10) of our progress bar (progBar). Every time we call the function, the value will be added.
If you don't like pure JavaScript, you can use jQuery. In any case you will have a proper progress bar for your web applications.

Happy coding to all of you!


  1. but how can we make real progress bar by checking bandwith?

    1. Dear Anonymous (!),
      I don't understand what you mean by bandwith... maybe bandwidth... In that case the question is way too general. In any case the parameters you will use to "move" your progressbar are indipendent from the general idea of the tag. See the JavaScript example for updating the progressbar.


Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.