Meter

Native meter element with WebKit/Moz pseudo rules, low/high/optimum thresholds, and a color key.

Edge cache hit ratio

72%

< 40% critical
40–85% watch
> 85% healthy

Widely Supported

uino-js

Quick implementation

meter {
  width: 100%;
  height: 0.85rem;
  border-radius: 999px;
}
meter::-webkit-meter-optimum-value {
  background: oklch(0.62 0.16 145);
  border-radius: 999px;
}
meter::-moz-meter-bar { background: oklch(0.62 0.16 145); }

Prompt this to your LLM

Prefer native meter over div progress for semantics.

Style an HTML meter for a dashboard.

Wrappers: .meter-demo, .meter-card.
Include heading, meter with min/max/low/high/optimum/value, legend list explaining thresholds.
Pseudo-element styles for WebKit and Firefox.

Return HTML + CSS.

Why this matters in 2026

Native meters expose implicit roles to accessibility APIs; wrapping a div means reimplementing ARIA progress semantics.

The logic

low/high/optimum shift the bar color between pseudo-classes in supporting engines.

Accessibility & performance

Pair with aria-valuetext for human units; duplicate critical context in visible legend text.