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 |