A bright head races around a figure eight, dragging a layered tail that fades and blurs behind it. Fits reconnecting and retrying states where the wait has no known end.
Reconnecting
Attempt 3 of 5
Your edits are saved locally
npx shadcn@latest add https://hyperblur.dev/r/loader-infinity-trace.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-infinity-trace.tsx.
import { LoaderInfinityTrace } from "@/components/hyperblur/loader-infinity-trace"
<LoaderInfinityTrace label="Reconnecting" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 120 | Width of the loader in pixels. Height is half of it. |
| color | string | "#2f7bff" | Outer color of the tail gradient and the head glow. |
| accent | string | "#7fb3ff" | Middle color of the tail and the segment right behind the head. |
| speed | number | 2.2 | Seconds for one lap of the figure eight. |
| thickness | number | 3 | Stroke thickness of the track and the tail in pixels. |
| label | string | Visible caption. Without it, Reconnecting is announced to screen readers only. |