jshguo

Spinner

Component 1

About

A minimal loading spinner that renders an animated rotating icon, sizable and colorable via className.

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-4">
      <Spinner />
      <Spinner className="size-6" />
      <Spinner className="size-8 text-muted-foreground" />
    </div>
  );
}

Dependencies

More by jshguo

View all
  • Progress

    Progress

    426
  • Select

    Select

    369
  • Textarea

    Textarea

    258
  • Input OTP

    Input OTP

    160
  • Interfaces Carousel

    Interfaces Carousel

    160
  • Switch

    Switch

    136
  • Hover Card

    Hover Card

    109
  • Card

    Card

    85