About
A small animated ring that signals an in-progress, busy status while content is loading, with no progress amount to report.
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";
export default function SpinnerDemo() {
return (
<div className="flex items-center gap-8">
<div className="flex flex-col items-center gap-2">
<Spinner label="Loading runs" size="sm" />
<span className="text-xs text-muted-foreground">sm</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner label="Loading runs" size="md" />
<span className="text-xs text-muted-foreground">md</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner label="Loading runs" size="lg" />
<span className="text-xs text-muted-foreground">lg</span>
</div>
</div>
);
}
More by keshon
View all
List
1
Thinking
Lanes
Key Value List
Status Dot
Note
Split