HTML <progress> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Show a progress bar:

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

Try it Yourself »

Definition and Usage

The <progress> tag represents the completion progress of a task.

Tip: Always add the <label> tag for best accessibility practices!

Tips and Notes

Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<progress>	8.0	10.0	16.0	6.0	11.0

Attributes

Attribute	Value	Description
max	number	Specifies how much work the task requires in total. Default value is 1
value	number	Specifies how much of the task has been completed

Global Attributes

The <progress> tag also supports the Global Attributes in HTML.

Event Attributes

The <progress> tag also supports the Event Attributes in HTML.

HTML DOM reference: Progress Object

Default CSS Settings

None.