X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML <progress> Tag

The <progress> tag is one of the HTML5 elements. It is used to display the progress of the task (progress bar). Dynamically changing values of the progress bar are be defined with the scripts (JavaScript).

The appearance of the element can differ, depending on the browser and operating system.

We recommend to use the <meter> tag to represent a gauge (e.g. relevance of a query result).

Syntax

The <progress> tag comes in pairs; the closing tag is required.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100"></progress>
  </body>
</html>

Result

Attributes

Attribute Value Description
max number Defines the maximum volume of the current process. The value can be a positive number bigger than the 0.
value number Defines the size of the already completed task volume. The value can be a number from 0 to numbers, indicated in the max attribute, or a number in the range from 0 to 1, if the max attribute isn’t specified.

The <progress> tag also supports the Global Attributes and the Event Attributes.


Browser support

8+ 16+ 6+ 11+


Do you find this helpful?

Related articles