PUBLISHED ON: FEBRUARY 20, 2021
HTML Progress Tag
In HTML, the <progress>
tag is used to indicate the progress of a task.
-
For better accessibility, it is recommended to always add <label>
tag before it.
-
The <progress>
tag in HTML Web Page is used to show an indicator that represents the completion of a task or typically it displays a progress bar.
HTML <progress>
Tag Syntax and Usage
The <progress>
tag requires the start(opening) tag and end(closing) tag.
Required syntax for the same is given below:
<progress>
....content here
</progress>
HTML <progress>
Tag Attributes
The <progress>
tag supports both global and event attributes and some of the common attributes are given below.
1. Max
This attribute is used to indicate how much work task indicated by the progress tag requires. By default, the value of the max attribute is 1.
2. Value
This attribute is used to indicate the amount of task that has been completed. The value attribute must be a valid floating-point number and it must lie in between 0 and max.
If there is no value then the progress bar is indeterminate.
HTML <progress>
Tag Basic Example
Below we have a basic example for clear understanding of <progress> tag:
Default CSS Settings for HTML <progress>
Tag
None
Browser Support for HTML <progress>
Tag
Following browsers support this attribute:
-
Firefox 16+
-
Google Chrome 8+
-
Internet Explorer 10+
-
Safari 6+
-
Opera 11+