HTML5 <progress> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <progress> element represents the completion progress of a task.
This element normally used to indicate how much of a task has been completed, such as loading something on a page or registration process. It is typically displayed as a progress bar and often marked as a percentage from 0 to 100%.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Inline |
|---|---|
| Content: | Inline and text, but no <progress> among its descendants |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <progress> tag is given with:
The example below shows the <progress> tag in action.
Example
Try this code »<h2>Task Progress</h2>
<p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var i = 0;
var progressBar = document.getElementById("bar");
function countNumbers(){
if(i < 100){
i = i + 1;
progressBar.value = i;
// For browsers that don't support progress tag
progressBar.getElementsByTagName("span")[0].textContent = i;
}
// Wait for sometime before running this script again
setTimeout("countNumbers()", 500);
}
countNumbers();
</script>Note: The <progress> element normally used in conjunction with the JavaScript to display the progress of a task. This element should not be used for representing a gauge. To represent a gauge, use the <meter> tag instead.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <progress> tag.
| Attribute | Value | Description |
|---|---|---|
max |
number | Specifies how much work the task requires in total. |
value |
number | Specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if the max attribute is not present. |
Global Attributes
Like all other HTML tags, the <progress> tag supports the global attributes in HTML5.
Event Attributes
The <progress> tag also supports the event attributes in HTML5.
Browser Compatibility
The <progress> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Forms.
Related tags: <meter>.
