Dots Loader

Three dots bouncing in sequence.

Example.tsx

import { DotsLoader } from "@/components/better/dots-loader"

export function Example() {
  return (
    <DotsLoader
      size={12}
      count={3}
      gap={8}
      bounce={12}
      speed={0.9}
      color="#6366f1"
    />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
className	string	—
size	number	10	Diameter of each dot in pixels.
count	number	3	Number of dots.
gap	number	8	Gap between dots in pixels.
color	string	"currentColor"	Dot colour (any CSS color). Defaults to the current text colour.
speed	number	0.9	Seconds for one full bounce cycle.
bounce	number	—	How far each dot travels up, in pixels (defaults to `size`).