The HTML <progress> tag
Definition and Usage
<progress> tags to represent the completion progress of a task.
Tip:Always add <label> Tag For the best accessibility practices！
See Also：
HTML DOM Reference Manual：Progress Object
Example
Display Progress Bar：
<label for="file">Download Progress：</label> <progress id="file" value="32" max="100"> 32% </progress>
Tips and Comments
Tip:The <progress> Combined with JavaScript, the marker can display the progress of the task.
Note:<progress> The tag is not suitable for representing gauges (such as disk space usage or the relevance of query results). To represent gauges, please use the <meter> tag instead.
Attribute
| Attribute | Value | Description |
|---|---|---|
| max | Number | Specifies the total work required for the task. The default value is 1. |
| value | Number | Specifies the portion of the task that has been completed. |
Global Attributes
<progress> The tag also supports Global Attributes in HTML.
Event Attributes
<progress> The tag also supports Event Attributes in HTML.
Default CSS Settings
None.
Browser Support
The numbers in the table indicate the first browser version to fully support the tag.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 10.0 | 16.0 | 6.0 | 11.0 |
