Breathe Ring

A pulsating circular ring loading spinner that breathes by animating its scale and border thickness in a continuous loop.

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

import BreatheRing from "@/components/ui/breathe-ring";

export default function BreatheRingDemo() {
  return (
    <div className="flex items-center justify-center w-full h-64">
      <BreatheRing />
    </div>
  );
}