Fade Arc

Component 5

About

An animated SVG arc spinner with dual gradient fade for indicating loading states.

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

Code

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

Usage.tsx

import { FadeArc } from "@/components/ui/fade-arc";

export default function FadeArcDemo() {
  return (
    <div className="flex min-h-[240px] w-full items-center justify-center">
      <FadeArc className="size-10 text-primary" />
    </div>
  );
}