Web4College

HTML pogress tag

HTML <progress> tag represents the completion of a task in the form of the progress bar. In this case, we are not sure how much works remains to be done.

Example
Try it
<p>Work's progress is 70%: <progress max=100 value=70> </progress> </p>

Work's progress is 70%:

Tag Uses

Specific uses of <progress> tag

Determinate progress bar

We must use the value attribute with the current progress to make a determinate progress bar.

Example
Try it
<progress max=100 value=70> </progress>

Indeterminate progress bar

We should remove value attribute to make an indeterminate progress bar.

Example
Try it
<progress max=100 > </progress>

Tag omission

Both opening and closing tags are necessary for the progress element.

Global Attributes

All the global attributes are applicable on the progress element.

Tag Attributes

Attributes that are applicable to <progress> tag
value

current value from 0 to max.

Example
Try it
<progress max=100 value=70> </progress>
max

The maximum value or range of the progress bar.

Example
Try it
<progress max=100 > </progress>