HTML5 <progress> Tag

The HTML <progress> tag represents the completion progress of a task, typically displayed as a progress bar. It was introduced in HTML5.

The only content permitted inside this element is phrasing content. There is an added condition that there must be no <progress> element among its descendants. Both the starting and ending tag are mandatory for this element. The parent of the <progress> tag can be any element that accepts phrasing content.

Here are some examples of using this tag:

<p>Moving Files: <progress id="ps" value="70" max="100"><span>0</span>%</progress></p>

<p>Waiting for Singal: <progress id="pi" max="100"></progress></p>

Attributes

max

This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than zero and be a valid floating point number. The default value is 1.

value

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Note that the minimum value is always 0 and the min attribute is not allowed for the progress element. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.

Examples

See the Pen HTML progress Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <progress> element on MDN.
  2. You can also read the HTML <progress> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top