Components / Base / Meter
B6 · Base
Meter
A track with ok, warn, and over fills. The percent is also a label.
<div class="meter" role="meter" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Queue">
<i class="warn" style="width:70%"></i>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A single percent needs a track.
- The band is ok, warn, or over.
When not to use
- The value is a time series.
- Several meters would be clearer as a table.
Usage
<div class="meter" role="meter" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Queue">
<i class="warn" style="width:70%"></i>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| .meter > i | width | — | Fill percent. |
| .warn | class | absent | Warn colour. |
| .over | class | absent | Danger colour. |
| role=meter | aria | — | valuenow, valuemin, valuemax, and a label. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the meters. They are not sliders. |
Accessibility
- Each meter has role=meter and a label.
- The percent is visible text above the track.
- Colour is paired with the word in the label.
Motion
- The fill does not animate.
Pattern origin
Base control. .meter is in yravg-ui v1.0.