HTML <progress> Tag
Description
The <progress> HTML tag is used to represent the progress of a task or the completion status of a particular process within a web page. It typically includes attributes such as "value" and "max" to define the current progress value and the maximum value possible, respectively. This tag is often employed in conjunction with JavaScript to dynamically update and display progress bars, making it useful for tracking the advancement of file uploads, form submissions, or any task that involves a measurable degree of completion on a webpage. It enhances user experience by providing visual feedback on ongoing processes.
Properties
- Permitted Parents
- Any element that accepts phrasing content
- Content
- Inline and text, but no <progress> among its descendants
- Start/End Tags
- Start tag: required, End tag: required
Example
Download progress:
<progress value="45" max="100"></progress>Attributes
| Attribute | Definition |
|---|---|
| max | Specifies how much of the task has been completed |
| value | Specifies how much work the task requires in total |
Global Attributes
The <progress> tag also supports the Global Attributes in HTML5
Event Attributes
The <progress> tag also supports the Event Attributes in HTML5
Browser Support
The following table will show you the current browser support for the HTML <progress> tag.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 6 | 6 | 11 | 6 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 6 | 11 | 7 | 1 | 4.4 |
Last updated by CSSPortal on: 30th September 2023