Meter

x-bladewind::meter visualises a bounded measurement (disk usage, a score, a signal strength) as opposed to Progress Bar's task completion. Give it low and high boundaries and it colours itself semantically: green for the good zone, red for the bad one, yellow for the zone in between. A real, visually hidden <meter> element carries the actual accessible semantics; the coloured bar is purely decorative.

<x-bladewind::meter value="72" max="100" low="30" high="70" label="Battery" />

With no optimum, higher values are assumed to be better: the zone above high is green, below low is red, and the band between is yellow.

When lower is better

Some measurements go the other way: an error rate, latency, CPU load. Set optimum to a value inside the zone that should read as "good"; the meter works out which end is bad from there.

<x-bladewind::meter value="8" max="100" low="20" high="60" optimum="0" label="Error rate" />

Without zones

Omit low/high for a plain bounded bar with no semantic colouring: a single neutral colour, still a real measurement rather than a completion percentage.

<x-bladewind::meter value="640" max="1000" label="Storage used (MB)" />

Sizes

Set size to tiny, small, medium (default), or large.

Full List Of Attributes

Meter with all attributes defined

<x-bladewind::meter
value="60"
min="0"
max="100"
low="30"
high="70"
optimum="0"
label="Error rate"
show-value="true"
size="medium"
class="ml-2" />