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.

<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.

<progress max=100 value=70> </progress>

Indeterminate progress bar

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

<progress max=100 > </progress>

Try</>

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.; <progress max=100 value=70> </progress>
max: The maximum value or range of the progress bar.; <progress max=100 > </progress>

Next Previous