View video tutorial

HTML <progress> Tag

HTML

The <progress> tag is used to indicate the progress of a task.

HTML <progress> Tag


The <progress> element displays the progress of a task in a progress bar.

It is usually used to show progressive values ​​instead of showing a value.

Element Attributes

Attribute Value Description
max number Specifies how much work is required to complete the task. Default value is 1.
value number Specifies how much work has been done.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<label for="task">Task progress:</label>
<progress id="task" value="25" max="100"> 25% </progress>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<progress id="task" value="0" max="100"> 0% </progress> <br>
<input type="button" value="Start" onclick="f2();" />
Try it Now »

Click on the "Try it Now" button to see how it works.