The <meter> element displays a progress bar.
This control displays a scalar measurement within a known range.
A <meter> element that indicates 50% complete.
<div>Loading files... </div>
<br>
<meter value="0.5">50%</meter>
The <meter> control is also referred to as a slider or a gauge.
Example usages includes temperature, disk usage, web traffic, and more.
Note: If the browser does not support the meter tag, its content will be displayed.
A <meter> element that specifies steam pressure.
<div>Steam pressure... </div>
<br />
<meter min="0" max="100" value="35">35 psi</meter>
<div>35 psi</div>
This table lists the <meter> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| value | number | Gauge current value between 0 and 1. This value is required. |
| min | number | Range minimum value |
| max | number | Range maximum value |
| id | identifier | Defines a unique identifier for the meter. |
| class | classnames | Sets one or more CSS classes to be applied to the meter. |
| style | CSS-styles | Sets the style for the meter. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the meter is hidden. |
| title | text | Sets a title that displays as a tooltip. |
| low | number | Low value range |
| high | number | High value range |
| optimum | number | Optimal value for the gauge |
| form | form-id | Form the meter element belongs to |
For additional global attributes see our global attributes list.
By default, the <meter> background is green and gray.
With CSS the background color can be customized.
A <meter> control with customized background colors.
<style>
meter.meter-color::-webkit-meter-optimum-value { background: red; }
meter.meter-color::-webkit-meter-bar { background: cornsilk; }
</style>
<div>Loading files...</div>
<br />
<meter class="meter-color" value="0.6">60%</meter>
Here is when <meter> support started for each browser:
![]() Chrome
|
8.0 | Dec 2010 |
![]() Firefox
|
6.0 | Aug 2011 |
![]() IE/Edge
|
13.0 | Nov 2015 |
![]() Opera
|
11.0 | Dec 2010 |
![]() Safari
|
6.0 | Jul 2012 |