Spinner

Component 612

About

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 { Spinner } from "@/components/ui/spinner"

const variants = ['default', 'circle', 'pinwheel', 'circle-filled', 'ellipsis', 'ring', 'bars', 'infinite'];

const Demo = () => (
  <div className="grid grid-cols-4 gap-16">
    {variants.map((variant) => (
      <div key={variant} className="flex flex-col items-center justify-center gap-4">
        <Spinner key={variant} variant={variant} />
        <span className="text-xs text-muted-foreground font-mono">{variant}</span>
      </div>
    ))}
  </div>
);
  
export default { Demo }