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: 270deg and --o-size-ratio: 1.6 are 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 value or the text is all the script does; Orbit redraws the arcs.

Related