Stacked circular progress bars
Three metrics around one center, each ring labeled in the open quarter where it starts.
How it's built
- Three
<o-progress>on lanes 11, 9 and 7 of one.gravity-spot: concentric with no positioning. --o-range: 270degand--o-size-ratio: 1.6are set once on the system. Every ring picks them up, and 1.6 lanes on rings two lanes apart leaves a thin gap.- Each label is an
<o-arc range="auto">on the same lane as its ring: the arc is as long as its text.text-anchor="end"ends it at--o-from: 356deg, just before the ring starts. - Changing
valueor the text is all the script does; Orbit redraws the arcs.
Related
- Progress with background
- Layered status rings: rings stacked in depth instead
- Progress rings demo: three full rings with a total
- Orbit Kit rings