HTML5: the progress element

Tweet

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:
10
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;
};
</script>

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!