About
A multi-variant loading indicator (spinner, progress bar, bouncing dots, or pulsing dot) with size and label options, for showing busy/streaming/upload state in AI chat and agent UIs.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Loader to your project and fits it to your theme.
Code
How AI Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Loader from "@/components/ui/loader";
export default function LoaderDemo() {
return (
<div className="flex items-center justify-center gap-10 p-10">
<Loader variant="spinner" size="md" />
<Loader variant="dots" size="md" />
<Loader variant="pulse" size="md" />
</div>
);
}

