fade-arc

1import { useId } from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function FadeArc({ className, style, ...props }: React.ComponentProps<"svg">) {
6  const baseId = useId().replace(/:/g, "");
7  const leadingGradientId = `${baseId}-leading`;
8  const trailingGradientId = `${baseId}-trailing`;
9 
10  return (
11    <>
12      <style>{`
13        @keyframes loading-ui-fade-arc-spin {
14          to {
15            transform: rotate(360deg);
16          }
17        }
18      `}</style>
19      <svg
20        viewBox="0 0 24 24"
21        fill="none"
22        xmlns="http://www.w3.org/2000/svg"
23        role="status"
24        className={cn(className)}
25        style={{
26          animationName: "loading-ui-fade-arc-spin",
27          animationDuration: "var(--duration, 1s)",
28          animationTimingFunction: "linear",
29          animationIterationCount: "infinite",
30          ...style,
31        }}
32        {...props}
33      >
34        <defs>
35          <linearGradient
36            id={leadingGradientId}
37            x1="50%"
38            x2="50%"
39            y1="5.271%"
40            y2="91.793%"
41          >
42            <stop offset="0%" stopColor="currentColor" />
43            <stop offset="100%" stopColor="currentColor" stopOpacity="0.55" />
44          </linearGradient>
45          <linearGradient
46            id={trailingGradientId}
47            x1="50%"
48            x2="50%"
49            y1="15.24%"
50            y2="87.15%"
51          >
52            <stop offset="0%" stopColor="currentColor" stopOpacity="0" />
53            <stop offset="100%" stopColor="currentColor" stopOpacity="0.55" />
54          </linearGradient>
55        </defs>
56        <g fill="none">
57          <path
58            d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"
59            fill={`url(#${leadingGradientId})`}
60            transform="translate(1.5 1.625)"
61          />
62          <path
63            d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"
64            fill={`url(#${trailingGradientId})`}
65            transform="translate(1.5 1.625)"
66          />
67        </g>
68      </svg>
69    </>
70  );
71}
72 
73export { FadeArc };