240° gauge

A stepped speedometer: fifteen bands on a 240° arc light up with the speed, each with its number curved over it.

How it's built

  • --o-range: 240deg; --o-from: 240deg on the .gravity-spot opens the dial at the bottom, and every ring inherits it.
  • Fifteen <o-arc> without value split the range into equal steps. --o-gap: 3 keeps a dark line between them, so each step reads on its own.
  • The numbers are fifteen more arcs on orbit-11, with text and a transparent fill. Same count, same range: each number sits over its band.
  • Lit bands get a class; :nth-child(n + 10) and (n + 13) turn the last steps amber and coral.
  • The universe is shorter than it is wide, since the dial leaves the bottom free. --o-force: 100cqw keeps the reach at the full width, and .at-top plus a top margin of half a width puts the center where it would be in a square.
  • The readout is a centered satellite ten lanes wide, and the universe is a role="meter".

Related