Signal bars of growing height light up one after another, like a device searching for a connection.
Searching for networks
Keep your phone near the router
npx shadcn@latest add https://hyperblur.dev/r/loader-signal-bars.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-signal-bars.tsx.
import { LoaderSignalBars } from "@/components/hyperblur/loader-signal-bars"
<LoaderSignalBars size={36} label="Searching for networks" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 36 | Height of the tallest bar in pixels. |
| color | string | "#2f7bff" | Color at the base of each bar. |
| accent | string | "#7fb3ff" | Color at the top of each bar. |
| speed | number | 1.8 | Seconds for one pass of the sequence. |
| bars | number | 4 | Number of bars, from 3 to 7. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |