How to add HTML <progress> Tag with label Tag
Show a progress bar.
Definition and Usage
The <progress> tag represents the completion progress of a task.
Tip: Always add the <label> tag for best accessibility practices!
Tips and Notes
Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.
Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
Attributes
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies how much work the task requires in total. Default value is 1 |
| value | number | Specifies how much of the task has been completed |
index.html
Example:
HTML
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Output should be:
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |