A row of dots rides a sine wave while a color sweep runs through them from the first dot to the last.
npx shadcn@latest add https://hyperblur.dev/r/loader-wave-dots.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-wave-dots.tsx.
import { LoaderWaveDots } from "@/components/hyperblur/loader-wave-dots"
<LoaderWaveDots size={72} label="Searching 2,400 reviews" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 72 | Width of the whole row in pixels. Dot size follows from it and the dot count. |
| color | string | "#2f7bff" | Resting dot color. |
| accent | string | "#9fc6ff" | Color each dot takes at the crest of the wave. |
| dots | number | 7 | Number of dots in the row. |
| speed | number | 1.4 | Seconds for one full wave cycle. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |