Skip to content
Orbit CSS radial UI composer

240° gauge in CSS — speedometer-style Orbit example

A 240° gauge is the shape you’ll recognize from car speedometers and tachometers: a wide arc that opens downward, leaving room at the bottom for a center label or pivot. The extra arc length compared to a half-circle gauge gives you space for fifteen or more numbered tick marks — enough resolution for a speedometer where every 10 km/h needs to be readable at a glance.

This example places fifteen numbered <o-arc> labels on one orbit, fifteen colored fill arcs (green → orange → red) on a second, and a single needle element on top.

How it works

  • range-240 from-240 opens a 240° arc starting at the 6 o’clock position. The result is the classic “smile-shaped” gauge with the gap at the bottom.
  • Two orbits, one for numbers and one for color bands. The numbers live on orbit-6 shrink-70 (slightly smaller radius, so they sit inside the band). The colored bands live on orbit-4 and use grow-0.7x to give them visible thickness.
  • --o-gap: 2 adds a tiny separation between adjacent arcs so the tick boundaries are visible. Without it, the arcs blend into one continuous bar.
  • Color zones in groups of five create the green/orange/red traffic-light pattern that drivers instinctively read. You can shift the boundary between zones by changing how many arcs of each color you list.

Customization

Convert this to a 0–220 km/h speedometer by changing the <o-arc> text content from 10, 20, … to 20, 40, … and adjusting the count.

Animate the needle with a CSS transition:

.needle {
  transition: transform 0.4s ease-out;
}

Then update the angle-X class with JavaScript when the value changes — Orbit’s angle classes work with style.transform-equivalent rotations, so the transition applies cleanly.

Drop the colored zones entirely if you want a minimalist all-black gauge — just delete the second orbit and the gauge will still read as a speedometer thanks to the numbered ticks.

Use this in your project

Install Orbit CSS to get the <o-arc> element and orbit primitives used above.