Displaying the Progress of Tasks with HTML5

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial Sue Smith will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can’t rely on it just yet.

For demonstration, we are simply going to update the progress element using a JavaScript timeout. We will allow the user to start the task by pressing a button, which we will disable while the task executes, updating the progress element and a textual indicator throughout. When the task is complete, the button will be enabled again and the user can start the task over again if they wish. Create your HTML5 page. Sue Smith will place her JavaScript function in the script section and the page elements in the body next. Add the progress element to the body section of your page, together with a little informative text. She is starting her task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100.