A conic gradient ring with a glowing head that spins while the whole ring breathes in and out.
Processing payment
Visa ending 4242 · $128.40
Keep this window open
npx shadcn@latest add https://hyperblur.dev/r/loader-ring-gradient.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-ring-gradient.tsx.
import { LoaderRingGradient } from "@/components/hyperblur/loader-ring-gradient"
<LoaderRingGradient size={56} label="Processing payment" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Outer diameter in pixels. |
| color | string | "#2f7bff" | Color of the head and the bright end of the trail. |
| accent | string | "#1a2a52" | Color of the faded start of the trail. |
| thickness | number | 5 | Ring thickness in pixels. |
| speed | number | 1.1 | Seconds per rotation. The breathing runs at a slower pace. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |