HTML <progress> max Attribute

The max attribute on a <progress> tag sets the maximum value of the element. This value is a percentage value indicating when the process has completed.

Example

#

A max attribute on a <progress> element.
The value of this meter cannot exceed the maximum value specified.

Loading files...

<div>Loading files... </div>

<br />
<progress id="myprogress" value="0" max="100"></progress>

<script>
  setInterval( function(){
      let value = document.getElementById("myprogress").value;
      value = Math.min(value + .1, 100) % 100;
      document.getElementById("myprogress").value = value;
  }, 10 );
</script>

Using max

The max attribute specifies the max value for the progress element.

Its value is numeric which serves as the percentage needed to consider the progress completed.

If not set, the progress element uses 1 as its default maximum value.


Syntax

<progress max="number">

Values

#

Value Description
number Total number of percentage the work is considered to be completed.

Browser support

Here is when max support started for each browser:

Chrome
8.0 Dec 2010
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
11.0 Dec 2010
Safari
6.0 Jul 2012

You may also like

 Back to <progress>
Guides