Concentric rings expand from a core icon and fade out, staggered so there is always a pulse in flight.
Finding a match
Ranked Duo · est. wait 0:25
npx shadcn@latest add https://hyperblur.dev/r/loader-pulse-rings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-pulse-rings.tsx.
import { LoaderPulseRings } from "@/components/hyperblur/loader-pulse-rings"
<LoaderPulseRings size={96} label="Finding a match" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 96 | Diameter of the area the rings fill, in pixels. |
| color | string | "#2f7bff" | Ring and core color. |
| accent | string | "#7fb3ff" | Light end of the core gradient. |
| rings | number | 3 | Number of rings in flight at once. |
| speed | number | 2.4 | Seconds for one ring to expand and fade. |
| icon | ReactNode | Content of the core. Defaults to a signal icon. Use an inline SVG. | |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |