Robobro: Displaying the Progress of Tasks with HTML5

July 24, 2012 5 Comments

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we 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. This is how the progress bar looks in my installation of Firefox while the function is executing:

Create a Page

Create your HTML5 page using the following outline:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>

</body>
</html>

We will place our JavaScript function in the script section and the page elements in the body next.

Add the Progress Element

Add the progress element to the body section of your page, together with a little informative text:

<p>Task progress:</p>
<progress id="prog" value="0" max="100"></progress>

We are starting our task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100. We will update the value from JavaScript, so this markup is purely for the initial display of the progress element when the user browses to the page.

Provide User Interaction

Let’s allow the user to start the progress of the task by pressing a button. We will also indicate the percentage of progress in a textual element:

<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>

The input element will start the task executing, which will cause the JavaScript function to update the progress element. We will also update the div with the percentage indicator as the task progresses.

Implement the JavaScript

Let’s now complete the JavaScript for our task progress. In the script section of your page head, add a few variables to track progress:

//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;

Now add the function outline:

//function to update progress
function startProgress() {

}

Inside the function, first retrieve references to the page elements we are working with:

//get the progress element
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//get the textual element
var val = document.getElementById("numValue");

We need to update the progress bar element and textual element, as well as disabling the button while the task is unfolding, which we will do next:

//disable the button while the task is unfolding
startButt.disabled=true;

We will enable the button again when the task is complete. Now update the progress bar with the current level:

//update the progress level
prBar.value = currProgress;

This will cause the visual progress display to update according to the current value. Next let’s update the text indicator, by first working out the percentage and rounding the result:

//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+"%";

Now we can increment the current level of progress for the next time the function iterates:

//increment the progress level each time this function executes
currProgress++;

We want the function to stop when the progress level reaches 100, so let’s check:

//check whether we are done yet
if(currProgress>100) done=true;

We set the variable we declared outside the function so that we can refer to it each time the function executes. Now let’s tailor what happens to whether the task is complete or not:

//check whether we are done yet
if(!done)
	setTimeout("startProgress()", 100);
//task done, enable the button and reset variables
else
{
	document.getElementById("startBtn").disabled = false;
	done = false;
	currProgress = 0;
}

If the task is not yet complete, we simply call the function again after a timeout. If the task is complete, we enable the button again and update the variables. This allows the user to start the task again if they wish.

Conclusion

That’s the page complete. Open yours in a supporting browser to test it, pressing the button and watching the progress update until it reaches 100. Naturally in your own pages the progress bar will update users on more useful tasks, the code above is merely for demonstration. At the moment styling the progress element is not a straightforward affair, since different browsers are taking different approaches to displaying the progress element. As with most HTML5 elements, you can make basic use of the new feature, as long as your pages are not reliant on it and provide alternatives for users without supporting browsers.

See the progress bar in action here: http://developerdrive.com/demo/progress_bar/demo.html