pedrolunet

Ring Spinner

Component

About

A small rotating arc spinner that reads currentColor, for inline loading states in buttons, fields, and panels.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ring Spinner to your project and fits it to your theme.

Code

How Ring Spinner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Ring from "@/components/ui/ring";

export default function RingDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center">
      <Ring size={48} />
    </div>
  );
}

More by pedrolunet

View all
  • Spark Spinner

    Spark Spinner

    3
  • Flip Spinner

    Flip Spinner

    1
  • Clock Spinner

    Clock Spinner

    1
  • Wave Spinner

    Wave Spinner

  • Swirl Spinner

    Swirl Spinner

  • Snake Spinner

    Snake Spinner

  • Slide Spinner

    Slide Spinner

  • Ribbon Spinner

    Ribbon Spinner