Animated Spinner

Component 3

About

A Motion-powered circular loading spinner with size and tone variants for buttons, cards, and async states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Spinner to your project and fits it to your theme.

Code

How Animated Spinner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedSpinner } from "@/components/ui/animated-spinner";

export default function AnimatedSpinnerDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <div className="flex scale-[1.6] flex-col items-center gap-7">
        <div className="flex items-end gap-10">
          <AnimatedSpinner size="sm" />
          <AnimatedSpinner size="default" />
          <AnimatedSpinner size="lg" />
        </div>
        <div className="flex items-center gap-7">
          <AnimatedSpinner tone="primary" />
          <AnimatedSpinner tone="muted" />
          <AnimatedSpinner tone="success" />
          <AnimatedSpinner tone="warning" />
          <AnimatedSpinner tone="destructive" />
        </div>
        <div className="inline-flex items-center gap-2.5 rounded-lg border border-border bg-card px-4 py-2.5 text-sm text-muted-foreground">
          <AnimatedSpinner size="sm" tone="primary" />
          Loading your workspace…
        </div>
      </div>
    </div>
  );
}