Three dots swell and brighten one after another, with an optional text label in front, for inline waiting states.
npx shadcn@latest add https://hyperblur.dev/r/loader-dots-pulse.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-dots-pulse.tsx.
import { LoaderDotsPulse } from "@/components/hyperblur/loader-dots-pulse"
<LoaderDotsPulse label="Sam is typing" size={8} />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 10 | Dot diameter in pixels at full size. |
| color | string | "#3a6fcf" | Resting dot color. |
| accent | string | "#7fb3ff" | Color and glow of a dot at its peak. |
| speed | number | 1.3 | Seconds for one pulse. |
| label | string | Visible text shown before the dots. Without it Loading is announced to screen readers only. |