About
A set of nine small animated loading indicators (circle, dots, pulse, bars, ring, orbit, pulse-dots, orbit-dots, arc) with size, color, speed, thickness, track and an optional determinate progress value, for showing a loading state inline or inside a button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Loading Spinner to your project and fits it to your theme.
Code
How Loading 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";
export default function SpinnerDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-10 p-10 text-neutral-800 dark:text-neutral-200">
<Spinner variant="circle" />
<Spinner variant="dots" />
<Spinner variant="pulse" />
<Spinner variant="bars" />
<Spinner variant="ring" />
<Spinner variant="orbit" />
<Spinner variant="pulse-dots" />
<Spinner variant="orbit-dots" />
<Spinner variant="arc" />
</div>
);
}