HTML <progress> Tag

The <progress> tag 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+ 10+ 16+ 6+ 11+