180° gauge

A rating on a half circle: five named zones, a needle, and the zone you are in lit up.

How it's built

  • The universe is 2:1 with .at-bottom, so the center sits on its bottom edge. --o-force: 100cqw makes the reach the width instead of the shorter side.
  • Zones and names live on two rings that share range-180 from-270. Five <o-arc> without value split the half circle evenly, so each name lands in the middle of its zone with no math.
  • The names are text arcs with a transparent fill: --o-color colors the letters, and font-size is the same px size on any ring.
  • The needle is one .vector eight lanes long. Its ring turns with rotate, from -90deg for 0 to 90deg for 100.
  • The universe is a role="meter". The script keeps aria-valuenow, and an aria-valuetext with the zone name, in step with the drawing.

For "lower is better" metrics like latency, list the zones the other way round, teal first.

Related