A segmented 240 degree gauge fills with a color ramp and a glowing tip while an odometer of rolling digits counts up in the center. Leading zeros stay dimmed like an instrument panel.
Restore
orders-db snapshot
Nov 6, 23:00 UTC
42.7 GB · eu-west-1
Writes are paused
npx shadcn@latest add https://hyperblur.dev/r/loader-gauge-counter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-gauge-counter.tsx.
import { LoaderGaugeCounter } from "@/components/hyperblur/loader-gauge-counter"
<LoaderGaugeCounter value={progress} detail="18.4 MB/s" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled progress from 0 to 100. Leave it out and the loader runs its own looping demo progress. | |
| size | number | 150 | Width of the gauge in pixels. |
| segments | number | 36 | Number of segments along the arc, from 8 to 80. |
| color | string | "#2f7bff" | Color at the start of the arc. |
| accent | string | "#7fb3ff" | Color at the end of the arc, the tip glow and the detail line. |
| detail | string | Small line under the number, such as a transfer rate. | |
| duration | number | 5200 | Milliseconds for one demo loop when value is not set. |
| label | string | Caption under the gauge, also used as the accessible name. |