HTML <progress> tag
The <progress> tag is used to create progress-bar of a task. It is mainly used to display progress-bar such as file upload or download.
Type: Inline Element
Syntax of <progress> tag
<progress value="number" max="number"> </progress>
The max's number must be always equal or greater than the value's number.
Full code example
<!DOCTYPE html> <html> <head> </head> <body> <progress value="50" max="100"> </progress> </body> </html>
Output on the browser
The above example shows the task is half-completed.
value="50" means completed task.
max="100" means overall task.
Supported Browsers
| Tag | Chrome | Internet Explorer | Firefox | Safari | Opera Mini |
|---|---|---|---|---|---|
| <progress> | 8.0 or higher | 10.0 or higher | 16.0 or higher | 6.0 or higher | 11.0 or higher |
Attribute of <progress> tag
| Attribute | Value | Note |
|---|---|---|
| max | number | It specifies how much the task requires to make it completed. |
| value | number | It specifies how much the task has been progressed or completed with the reference of the max value. |
If the max attribute is not used, its default value is 1 so that value's number must be between 0 and 1 to show the progress bar.
Example of using <progress> tag without max attribute
<progress value="0.5"> <progress <p It also shows the task is half completed. </p>
More reference
The <progress> tag is new in HTML5. To display effective progress bar based on the live action, we have to use JavaScript.
This tag is not suitable for showing scalar measurement with fractional value. Use <meter> tag instead.