Bouncing Dots

An animated bouncing dots loading indicator that inherits the current text color and supports a configurable number of dots.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bouncing Dots to your project and fits it to your theme.

import { BouncingDots } from "@/components/ui/bouncing-dots";

export default function Default() {
  return (
    <div className="flex min-h-[200px] items-center justify-center bg-background text-foreground">
      <BouncingDots className="h-3 w-16 text-primary" />
    </div>
  );
}