HTML <progress> value Attribute

The value attribute on a <progress> tag sets the initial value of the element. The value must be numeric.

Example

#

A value attribute on a <progress> element.
This attribute assigns the initial progress value. The control repeatedly fills with the help of JavaScript.

Loading files...

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

<br />
<progress id="myprogress" value="30" min="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 value

The value attribute specifies the initial value of the progress element.

If this attribute is not set, the progress value will be 0.


Syntax

<progress value="number">

Values

#

Value Description
number A floating point or whole number. The default value is 0.

Browser support

Here is when value 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