Loading Spinner

A tiny circular loading indicator (an indeterminate ring built from a masked conic-gradient) that takes the surrounding text color, can carry an accessible label, and supports a delay so quick loads never flash it. Ported to React from the Sina UI (ebnsina) Svelte component.

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.

import Spinner from "@/components/ui/spinner";

export default function SpinnerWithTextDemo() {
  return (
    <div className="flex items-center justify-center w-full h-40">
      {/* Beside its own words, it's decoration: the text says what's happening. */}
      <p role="status" className="m-0 flex items-center gap-2 text-neutral-500">
        <Spinner /> Fetching manuscripts…
      </p>
    </div>
  );
}