Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <meter> Tag

The <meter> element displays a progress bar.

This control displays a scalar measurement within a known range.

Example

#

A <meter> element that indicates 50% complete.

Loading files...

50%
<div>Loading files... </div>

<br>
<meter value="0.5">50%</meter>

Using <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.

More Examples

A <meter> element that specifies steam pressure.

Steam pressure...

35 psi
35 psi
<div>Steam pressure... </div>

<br />
<meter min="0" max="100" value="35">35 psi</meter>
<div>35 psi</div>

Attributes for <meter>

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.


Did you know?

Did you know?

Customizing the background of <meter>

By default, the <meter> background is green and gray.

With CSS the background color can be customized.

A <meter> control with customized background colors.

Loading files...

60%
<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>

Browser support

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

You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides