About
A lightweight animated loading spinner built on lucide-react's Loader2Icon. Fully accessible with aria-label and role=status, accepts all SVG props, and supports size customization via className.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spinner to your project and fits it to your theme.
Code
How Spinner is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Loader2Icon } from "lucide-react";
function cn(...classes: (string | undefined | null | false)[]): string {
return classes.filter(Boolean).join(" ");
}
function Spinner({
className,
...props
}: React.ComponentProps<typeof Loader2Icon>) {
return (
<Loader2Icon
aria-label="Loading"
className={cn("animate-spin", className)}
role="status"
{...props}
/>
);
}
export default function SpinnerDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<Spinner className="w-10 h-10 text-foreground" />
</div>
);
}