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}
/>
);
}
const sizes = [
{ label: "sm", className: "w-4 h-4" },
{ label: "md", className: "w-6 h-6" },
{ label: "lg", className: "w-8 h-8" },
{ label: "xl", className: "w-12 h-12" },
];
export default function SpinnerSizesDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<div className="flex items-center gap-8">
{sizes.map(({ label, className }) => (
<div key={label} className="flex flex-col items-center gap-3">
<Spinner className={cn(className, "text-foreground")} />
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
</div>
);
}