Skip to content
Orbit

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 with Orbit: the arc is 90° wide, the ticks are alternating red and white vector elements, and the dark background sells the “instrument cluster” feel.

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

How it works

Section titled “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

Section titled “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).

Section titled “Related”

Use this in your project

Section titled “Use this in your project”

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