In the HTML5, there is an absolutely new element called “<progress>” that allow web developer to defines work-in-progress, used for representing the progress of a task. In this tutorial, we will introduce the basic usage of <progress> and used in conjunction with JavaScript to display the progress of a task or process as it is underway.Below is the example of HTML5 Progress Bar:
Supported Browsers
Before we start our tutorial, let’s check out the list of supported browsers that officially progress tag supported:
- Firefox Nightly 6.0a1
- Opera 11.10
- Chrome 11.0.696.65
Basic Usage
Ok, let’s start to implement the HTML5 progress bar into our project. Please insert the following code in between your <body> and </body>:
[xhtml]
<progress id="bar" value="0" max="100">
<span id="fallback">
<!– Your fallback goes here –>
</span>
</progress>
[/xhtml]
Let’s look at the syntax carefully, there are 3 kind of attributes that you can specify to the progress tag, which is id, value and max.
- id: Specifies the name of the element for JavaScript use.
- value: Specifies the value of current progress.
- max: Specifies the total value requires for a task.
Save your document, preview it on any supported browsers that mentioned above, and you should able to see a progress bar appear on your page. Yeah, simple enough right? We had just done a simple progress bar, now let’s make it dynamic.
Used In Conjunction With JavaScript
Our example will gradually added 10% of progression value to the progress bar every 1 second until it reach the maximum. Here is how our JavaScript should look:
[javascript]
<script>
window.onload = function() {
var bar = document.getElementById("bar"),
fallback = document.getElementById("fallback"),
loaded = 0;
var load = function() {
loaded += 10;
bar.value = loaded;
/* The below will be visible if the progress tag is not supported */
$(fallback).empty().append("HTML5 progress tag not supported: " + loaded + "% loaded");
if(loaded == 100) {
clearInterval(dummyLoad);
}
};
var dummyLoad = setInterval(function() {
load();
} ,1000);
}
</script>
[/javascript]
Please notice that, the script above will run when you refresh the page and the timer will start counting and update the status of the progress bar until the current progress value equal to the max value of the progress bar. Besides, it is always a good practice to provide fallback content for your <progress> element, because it is still relatively new and isn’t implemented in some browsers, such as Internet Explorer.
Final Code
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Progress Bar | onlyWebPro.com</title>
</head>
<body>
<p>
<progress id="bar" value="0" max="100"> <span id="fallback">
<!– Your fallback goes here –>
</span> </progress>
</p>
<script>
window.onload = function() {
var bar = document.getElementById("bar"),
fallback = document.getElementById("fallback"),
loaded = 0;
var load = function() {
loaded += 10;
bar.value = loaded;
/* The below will be visible if the progress tag is not supported */
$(fallback).empty().append("HTML5 progress tag not supported: " + loaded + "% loaded");
if(loaded == 100) {
clearInterval(dummyLoad);
}
};
var dummyLoad = setInterval(function() {
load();
} ,1000);
}
</script>
</body>
</html>
[/xhtml]