Spinner

Buttons 1

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 SpinnerButtonDemo() {
  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-4">
        <button
          className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          disabled
        >
          <Spinner className="w-4 h-4" />
          Loading...
        </button>
        <button
          className="inline-flex items-center px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium opacity-50 cursor-not-allowed"
          disabled
        >
          Disabled
        </button>
      </div>
    </div>
  );
}