Rings
<o-rings> draws concentric activity rings, outermost first.
The first ring touches the edge and the others step inward by whole lanes, as many as fit. Each ring is an <o-progress> over a track in a dim wash of its own color.
Attributes
| Attribute | Default | What it does |
|---|---|---|
data | [] | Rings: [{ value, min?, max?, color?, label? }]. Values are kept between the ring's min and max. |
min / max | 0 / 100 | Defaults for every ring that does not set its own. |
range / from | 360 / auto | Arc span and start angle. Partial rings center their gap at the bottom. |
thickness | auto | Ring thickness in lanes. By default it fills most of the space between rings. |
spacing | 1 | Multiplies the space between rings. step is its old name and still works. |
track | dim ring color | One track color for every ring. |
shape | rounded | Ring endings. |
label / unit | Text in the middle. | |
size | 200px | Width of the widget. |
glow | off | A glow in each ring color. |
format, decimals, currency, locale | Number format of ring values in titles and the accessible name, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Styling
| Property | Default | What it does |
|---|---|---|
--ok-hub-color | inherits | Color of the readout in the middle. |
--ok-hub-bg | none | Background of the hole in the middle. |
--ok-hub-size | 1.4em | Font size of the readout. |
--ok-font-size | 8cqmin | Base font size, as a share of the widget. Text scales with it. |
Ring colors come from data; track overrides the dim tracks.
More examples
Half rings with a label
Thin rings, many of them
A glowing light theme
Accessibility
The rings have role="img" and a name that reads every ring as “Move: 80 of 100”. Labels in data make it useful; without them the rings are called Ring 1, Ring 2 and so on. Set aria-label to replace it.