Progress HTML5 and meter elements attributes

<progress>: 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%
<meter>: defines the maximum value of the gauge's range; if omitted it will be '1'

min attribute:

<meter>: defines the minimum value of the gauge's range; If omitted it will be '0'

value attribute:

<progress>: 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)
<meter>: this value is required and it specifies a current value (as a number) of the gauge (<meter>).

high attribute:

<meter>: defines a high value of the range and it is not required

low attribute:

<meter>: defines a low value of the range and it is not required

optimum attribute:

<meter>: defines what value is considered as optimal for the range

form attribute:

<meter>: specifies one or more of the forms (<form>) that the meter will be assigned to; the value must be a form id attribute; if more than one than they are separated by comma.

Example

Example that includes progress and meter elements attributes:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {background-color:#eee; margin:10px 0px; padding:4px;}
p:nth-of-type(2n) {background-color:#fff;}
progress {height:30px; width:98%;}
meter {height:20px; width:98%; margin-top:5px;}
</style>
</head>
<body>
<p>A progress bar looks like this:</p>
<p><progress value="5.2" max="10"></progress></p>
<p>Display 2 meters with different settings:</p>
<p><meter value="3" min="0" max="10">2 out of 10</meter><br />
<meter value="0.9"></meter></p>
<p><em>p.s. These examples do not use any scripting.</em></p>
</body>
</html>

›› go to examples ››

Progress HTML5 and meter elements attributes

Attributes and related elements:

Attribute characteristics and purpose:

Example

Example that includes progress and meter elements attributes:

Comments

About

Contact

Get Connected