A dial of fine ticks lights up clockwise with a brighter, longer leading tick, and phase markers around the rim switch on as each stage is reached. The center shows the percentage and the current phase.
storefront-web
main · 8f3c2e1
Fix tax rounding on the cart page
npx shadcn@latest add https://hyperblur.dev/r/loader-tick-ring.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-tick-ring.tsx.
import { LoaderTickRing } from "@/components/hyperblur/loader-tick-ring"
<LoaderTickRing value={progress} phases={["Install", "Build", "Upload"]} />| 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 | 128 | Diameter of the dial in pixels. |
| ticks | number | 60 | Number of ticks around the dial, from 12 to 120. |
| color | string | "#2f7bff" | Color of the lit ticks. |
| accent | string | "#7fb3ff" | Color of the leading tick, the phase markers and the phase name. |
| phases | string[] | ["Install", "Build", "Optimize", "Upload"] | Stages spread evenly over the dial. The current one is shown in the center. |
| duration | number | 5600 | Milliseconds for one demo loop when value is not set. |
| label | string | Caption under the dial, also used as the accessible name. |