Audio-style bars bounce out of phase with their own rhythm. Good for buffering, streaming and listening states.
Midnight Drive
Velvet Static
npx shadcn@latest add https://hyperblur.dev/r/loader-equalizer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-equalizer.tsx.
import { LoaderEqualizer } from "@/components/hyperblur/loader-equalizer"
<LoaderEqualizer size={32} bars={5} />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 32 | Height of the loader in pixels. Bar width and gaps follow from it. |
| color | string | "#2f7bff" | Color at the base of each bar. |
| accent | string | "#7fb3ff" | Color at the tip of each bar. |
| bars | number | 5 | Number of bars. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |