Skip to content
Orbit CSS radial UI composer

CSS fuel gauge example — compact 90° gauge

A fuel gauge is the most space-constrained gauge in a typical dashboard — it has to fit beside the speedometer without crowding it, but still be readable at a glance from the driver’s seat. The traditional design uses about a 90° arc with just two labels (E and F), a row of warning tick marks, and a red needle that wakes you up when it dips below quarter-tank.

This example reproduces that look in pure CSS: the arc is 90° wide, the ticks are alternating red and white vector elements, and the dark background sells the “instrument cluster” feel.

How it works

  • range-90 from-270 fit-range is the key trio. range-90 constrains the arc to a quarter circle, from-270 starts it at 9 o’clock, and fit-range makes Orbit distribute the children across the full range instead of leaving padding at the ends — important when you only have nine ticks.
  • Alternating red/white ticks at two heights are made by alternating medium (height: 4px) and small (height: 2px) vectors, with the first one painted red so a glance at the empty side jumps out.
  • <satellite> labels ride on a slightly larger orbit (orbit-3 shrink-20) so the E and F sit just outside the tick row. The middle satellite hosts an inline SVG fuel-pump icon — everything else is CSS.
  • The needle is rotated explicitly to angle-290 (about 1/4 tank). To make it move with real data, set the angle dynamically: angle = 270 + (level / max) * 90.

Customization

Make it a battery indicator by changing the SVG inside the middle satellite to a battery icon and recoloring the needle to green when full / red when low via a JS class toggle.

Add a low-fuel warning light by placing an extra <satellite> on a small inner orbit and toggling its background color when the level drops below threshold.

Switch to a temperature gauge by replacing the E/F labels with C/H and reversing the warning color (red on the high side instead of the low side).

Use this in your project

Install Orbit CSS and grab the markup above as a starting point.