About
A small SVG ring spinner that signals an operation is in progress, inheriting the surrounding text colour and respecting reduced-motion settings.
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/core-spinner";
export default function SpinnerColour() {
return (
<div className="flex flex-row flex-wrap items-center gap-5">
<div className="flex flex-row items-center gap-2">
<Spinner size={14} />
<span className="text-sm text-foreground">Refreshing</span>
</div>
<div
className="flex flex-row items-center gap-2"
style={{ color: "var(--u-color-accent)" }}
>
<Spinner size={14} />
<span className="text-sm" style={{ color: "inherit" }}>
Syncing the calendar
</span>
</div>
</div>
);
}
More by romanhaendler
View all
Textarea
Progress Bar
Tree View