Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
  Signup/Sign In

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+