React AI Loader

Loader preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the loader AI component into my project

Related Components

FAQ