Gauge
A half-circle meter for one value against a known range: a score, a quota, a target.
Scores
72
0100
99%
81%
<div class="mn-row" style="--mn-gap:2rem;align-items:flex-end">
<div><div class="mn-gauge" role="meter" aria-label="Design score" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" style="--v:72"><span class="mn-gauge-value">72</span></div><p class="mn-gauge-scale"><span>0</span><span>100</span></p></div>
<div class="mn-gauge mn-gauge-sm mn-success" role="meter" aria-label="Uptime" aria-valuemin="0" aria-valuemax="100" aria-valuenow="99" style="--v:99"><span class="mn-gauge-value">99%</span></div>
<div class="mn-gauge mn-gauge-sm mn-warning" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="81" style="--v:81"><span class="mn-gauge-value">81%</span></div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/gauge.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-gauge | The dial. Set --v from 0 to 100. Takes a colour role. |
| mn-gauge-value | The number in the middle. |
| mn-gauge-sm | A smaller dial. |
| mn-gauge-scale | Optional min and max labels under the dial. |
| --size · --thick | Width of the dial and thickness of its arc. |
Accessibility
- Use role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and a label.
- Write the value as text inside the dial; the arc repeats it.
- If colour carries meaning (good, warning, bad), say it in words nearby.