HTML pogress tag

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

Try </>

Specific uses

we can make two kinds of bars.

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>


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.

Specific Attributes

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>

Was this article helpful?




Get the newsletter