React AI Loader

Every chat app needs a loading spinner, but the standard Lucide Loader2 gets boring fast. This one's a custom SVG with a nice radial fade effect—each spoke has different opacity so it looks smoother as it spins. Pass a size prop to scale it up or down. It uses currentColor so it automatically matches whatever text color you're using, dark mode included. Drop it in message bubbles while streaming, in buttons during submission, or anywhere you need to tell users "hang on, thinking...". Simple but looks way better than a generic spinner.

Loader preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/loader.json

npx shadcn@latest add https://www.shadcn.io/registry/loader.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/loader.json

bunx shadcn@latest add https://www.shadcn.io/registry/loader.json

Related Components

FAQ