HTML <progress> Tag - HTML Tag

The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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.

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.

How to add HTML <progress> Tag

It shows a progress bar.

index.html

Example: HTML

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

Output should be:

What is HTML <progress> max Attribute

Definition and Usage

The max attribute specifies how much work the task requires in total.

Browser Support

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

Syntax

Attribute Values

Value	Description
number	A floating point number that specifies how much work the task requires in total before it can be considered complete. Default value is 1.

How to add HTML <progress> max Attribute

It shows a progress bar.

index.html

Example: HTML

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

Output should be:

What is HTML <progress> value Attribute

Definition and Usage

The value attribute specifies how much of the task has been completed.

Browser Support

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

Syntax

Attribute Values

Value	Description
number	A floating point number that specifies how much of the task has been completed

How to add HTML <progress> value Attribute

It shows a progress bar.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The progress element</h1>

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

</body>
</html>

Output should be:

html progress

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference