Circular progress with background

The everyday progress ring: one <o-progress> draws both the fill and the track behind it.

How it's built

  • One <o-progress> on orbit-10, 1.6 lanes thick. value drives the fill and the element redraws when it changes.
  • --o-fill colors the fill and --o-back-fill the track. A faint tint of the same color says how much is left without competing with it.
  • shape="circle" rounds both ends in proportion to the band.
  • The readout is a satellite on orbit-0, fourteen lanes wide, centered with .at-center.
  • role="progressbar" with aria-valuenow gives screen readers the same number as the ring.

Color by value

A status ring changes color with the value. The color is a custom property, so one line of script does it.

Related