A large percentage counter inside an SVG ring that fills as it counts. Pass a value, or leave it out to run a looping demo.
Installing update
Hyperblur Desktop 2.4.0
npx shadcn@latest add https://hyperblur.dev/r/loader-percentage.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-percentage.tsx.
import { LoaderPercentage } from "@/components/hyperblur/loader-percentage"
<LoaderPercentage value={72} label="Installing update" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Progress from 0 to 100. When omitted, the loader counts up in a loop on its own. | |
| size | number | 112 | Diameter in pixels. The number scales with it. |
| color | string | "#2f7bff" | End color of the ring gradient. |
| accent | string | "#7fb3ff" | Start color of the ring gradient. |
| thickness | number | 6 | Ring thickness in pixels. |
| duration | number | 4200 | Milliseconds for one loop of the demo count. Ignored when value is set. |
| label | string | Visible caption under the ring. Also the accessible name of the progress. |