HTML Meter Generator

Build a scalar gauge with the HTML meter element and see how browsers color it.

Presets:

Battery (high is good)
Disk (low is good)
Score 0–1
70 %

Browser color:

suboptimal
HTML
<label for="disk">Disk usage</label>
<meter id="disk" value="70" max="100" low="30" high="80" optimum="10">70 %</meter>

HTML Meter Generator

The <meter> element displays a scalar value within a known range — a gauge. Typical examples are disk usage, battery level, password strength, a relevance score or the fill level of a tank. Unlike a plain styled div, a meter has semantic meaning that assistive technology understands, and browsers color it automatically depending on whether the value is good or bad. The HTML Meter Generator writes valid markup and explains the resulting color.

Attributes

  • value – the current measurement (required).
  • min / max – the range, defaulting to 0 and 1.
  • low / high – thresholds that divide the range into a low, medium and high region.
  • optimum – the preferred value. It decides whether low or high values are considered good.
  • Fallback text – shown by browsers that do not support the element.

The generator validates that max is greater than min and that all thresholds lie inside the range, and adds an optional <label> connected through the id.

Understanding the colors

If the value lies in the same region as optimum, the bar is green. One region away it is yellow, two regions away it is red. For disk usage, set a low optimum so a nearly full disk turns red; for a battery, set a high optimum so a low charge turns red. The presets demonstrate both cases.

Tips

Always add a label or visible text so users know what is measured. Use the HTML Progress Generator for tasks that move toward completion, and the CSS Border Radius Generator to style the card around your gauge.

Frequently Asked Questions

meter shows a measurement within a known range, like disk usage, a rating or a battery level. progress shows how far a task has advanced, like an upload. Use progress for anything that moves toward completion.

They split the range into low, middle and high regions. If the value is in the same region as optimum, browsers show green; one region away gives yellow; two regions away gives red. The preview shows which color your settings produce.

min defaults to 0 and max to 1, so a value of 0.6 means 60 %. The generator omits the attributes when they equal these defaults.

Styling is browser-specific: WebKit uses ::-webkit-meter-bar and ::-webkit-meter-optimum-value, Firefox uses ::-moz-meter-bar. Width and height can be set with normal CSS.