Gauge
A circular progress gauge built with SVG. Animates from zero on mount using a spring easing curve and supports flexible sizing, custom colors, and an optional center label.
Import
import { Gauge } from "@animui/ui";Basic
Render multiple gauges side by side at different fill levels.
25
68
90
Sizes
Three size presets — sm, md, and lg — scale the SVG canvas and stroke width together.
60
60
60
Interactive
Drag the slider to update the gauge value live.
50
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value to display. |
max | number | 100 | Maximum value for the gauge. |
size | "sm" | "md" | "lg" | "md" | Gauge size variant. |
showValue | boolean | true | Show the numeric value in the center. |
label | string | — | Caption shown below the gauge. |
color | string | "#7c3aed" | Color of the progress arc. |
trackColor | string | "#e5e7eb" | Color of the background track ring. |
className | string | — | Additional classes. |