Fade Arc

A circular loader with a fading arc animation. It rotates continuously using a linear spin animation. The arc has two gradient sections for a smooth fade effect. Use for loading states and interactive elements.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/fade-arc

npx layro-cli add @turbostarter/fade-arc

npx layro-cli add @turbostarter/fade-arc

bunx layro-cli add @turbostarter/fade-arc

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { useId } from "react";

import { cn } from "@/lib/utils";

function FadeArc({ className, style, ...props }: React.ComponentProps<"svg">) {
  const baseId = useId().replace(/:/g, "");
  const leadingGradientId = `${baseId}-leading`;
  const trailingGradientId = `${baseId}-trailing`;

  return (
    <>
      <style>{`
        @keyframes loading-ui-fade-arc-spin {
          to {