A radar sweep rotates over concentric rings and lights up blips as it passes over them, at the same positions every time.
Scanning nearby
npx shadcn@latest add https://hyperblur.dev/r/loader-radar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-radar.tsx.
import { LoaderRadar } from "@/components/hyperblur/loader-radar"
<LoaderRadar size={96} label="Scanning nearby devices" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 96 | Diameter in pixels. |
| color | string | "#2f7bff" | Ring, grid and sweep color. |
| accent | string | "#9fc6ff" | Blip color and the leading edge of the sweep. |
| blips | number | 5 | Number of blips. Their positions are fixed by their index. |
| speed | number | 3 | Seconds per sweep. |
| label | string | Visible caption under the radar. Without it, Loading is announced to screen readers only. |