Skip to content
Orbit CSS radial UI composer

180° gauge in CSS — Orbit example

A 180° gauge is the half-circle meter you see on credit-score widgets, customer-satisfaction dashboards, and “how healthy is this thing?” displays. The shape works because the human eye instantly maps the position of a needle on a horizontal arc to a position on a scale — no legend required.

This example builds the entire gauge with five <o-arc> segments, a center pivot, and a single rotated vector as the needle. There’s no SVG and no JavaScript, so you can theme it with CSS variables and animate the needle with transform: rotate() like any other element.

How it works

  • range-180 from-270 on the outer orbit constrains the arcs to a 180° span starting at the 9 o’clock position (270°). Change from-270 to from-180 if you want the gauge to open downward instead of upward.
  • Two parallel orbits are used: one for the colored bands (orbit-4) and one for the text labels (orbit-5). Keeping them on separate orbits means the labels never overlap the colored fill, no matter how thick you make the bands.
  • The needle is a single vector element rotated with grow-1.6x to extend past the orbit radius. To make it point to a value, set angle-X where X is computed from your data: angle = 270 + (value/max) * 180.
  • Color zones are five arcs of equal width (one-fifth of 180° each). All five <o-arc> elements share the parent’s range-180, so Orbit divides the span evenly without you doing the math.

Customization

Rotate the needle to a value of 67%:

<div class="vector grow-1.6x outer-orbit needle angle-30"></div>

(270° + 0.67 × 180° = 390°, which wraps to 30°.)

Make the bands thicker by replacing orbit-4 with orbit-3:

<div class="orbit-3 range-180 from-270">
  <o-arc class="red"></o-arc>
  ...
</div>

Reverse the color order so green is on the left (good for “lower is better” metrics like latency or error rate) by simply reversing the <o-arc> elements.

Use this in your project

Install Orbit CSS and drop the markup above into any HTML page.