The <progress> element is intended to be used to present a progress (completion) of a certain task execution.

Although the progress element will work by itself, it is suggested to use it in collaboration with a script, let say JavaScript, in order to update the value (percentage) and thus present how much of the task is left to be completed.

If no value is assigned, the progress element will show an intermediate position; otherwise it may be presented as a range, from zero to maximum, or in between.

Syntax:

<progress></progress>

Attributes:

  • max - Indicates how much progress is needed to be done before completion. The default value 1.0, but if set to 100 it will represent 100%.
  • value - Indicates the current status of the progress bar and, in relation to max attribute, it is a percentage of the maximum number (limited to max attribute's number).
  • global attributes
  • event attributes

Example

The example with progress tag and its attributes:

 

›› go to examples ››