Gauge

A circular meter for a value within a known range.

Gauge

32%

68%

91%

<svg viewBox="0 0 100 100" width="80" height="80">
  <circle cx="50" cy="50" r="44" fill="none" stroke-width="8"
    stroke="var(--c-border)" />
  <circle cx="50" cy="50" r="44" fill="none" stroke-width="8"
    stroke="var(--c-accent)" stroke-linecap="round" pathLength="100"
    stroke-dasharray="68 100" transform="rotate(-90 50 50)" />
</svg>

Color scale

24%

61%

88%

Default color scale maps the value across success → warning → error. Pass a colors map (custom color range) to override the thresholds.

{/* Default color scale — stroke derived from the value */}
<circle stroke="var(--c-success)" stroke-dasharray="24 100" />  {/* low */}
<circle stroke="var(--c-warning)" stroke-dasharray="61 100" />  {/* mid */}
<circle stroke="var(--c-error)"   stroke-dasharray="88 100" />  {/* high */}

Custom range & secondary

74%

50%

Left: custom color range via a gradient stroke. Right: custom secondary color tints the unfilled arc. With arcPriority="equal" both arcs share equal weight so 50% reads as exactly half.

Indeterminate

Indeterminate spins continuously — pair it with copy like “Calculating usage…” so the spin reads as loading, not zero.

Markdown for agents: /design/gauge.md · spec: /design.md