About
Four points falling inward and back out. Each dot carries its own rotation, so it never reads as another ring. CSS only, reduced-motion safe. From WunderUI Motion, free, MIT.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Converge Spinner to your project and fits it to your theme.
Code
How Converge Spinner is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { ConvergeSpinner } from "@/components/ui/converge-spinner";
export default function ConvergeSpinnerDemo() {
return (
<div className="flex min-h-72 flex-col items-center justify-center gap-8 p-8">
<div className="flex w-90 max-w-full items-center gap-3 rounded-xl border border-border bg-card p-5 shadow-sm">
<ConvergeSpinner label="Searching 12 sources" />
<div className="flex min-w-0 flex-col gap-0.5">
<span className="text-sm font-medium text-foreground">
Searching 12 sources
</span>
<span className="text-sm text-text-secondary">
Docs, tickets and the changelog
</span>
</div>
</div>
<div className="flex items-center gap-8">
<ConvergeSpinner
className="size-6 [--wm-reach:9px]"
reach={9}
duration={1.2}
/>
<ConvergeSpinner />
<ConvergeSpinner className="size-16" reach={24} duration={2} />
</div>
</div>
);
}
More by WunderUI
View all
Theme Split
Logo Marquee
Deck Shuffle
Button