dash-ring

1import { cn } from "@/lib/utils";
2 
3type DashRingProps = React.ComponentProps<"svg">;
4 
5function DashRing({ className, ...props }: DashRingProps) {
6  return (
7    <svg
8      viewBox="0 0 24 24"
9      fill="none"
10      stroke="currentColor"
11      xmlns="http://www.w3.org/2000/svg"
12      role="status"
13      className={cn(className)}
14      {...props}
15    >
16      <circle
17        cx="12"
18        cy="12"
19        r="9.5"
20        opacity="0.1"
21        strokeWidth="2"
22        strokeLinecap="round"
23      />
24      <circle cx="12" cy="12" r="9.5" strokeWidth="2" strokeLinecap="round">
25        <animateTransform
26          attributeName="transform"
27          type="rotate"
28          from="0 12 12"
29          to="360 12 12"
30          dur="2s"
31          repeatCount="indefinite"
32        />
33        <animate
34          attributeName="stroke-dasharray"
35          values="0 150;42 150;42 150"
36          keyTimes="0;0.5;1"
37          dur="1.5s"
38          repeatCount="indefinite"
39        />
40        <animate
41          attributeName="stroke-dashoffset"
42          values="0;-16;-59"
43          keyTimes="0;0.5;1"
44          dur="1.5s"
45          repeatCount="indefinite"
46        />
47      </circle>
48    </svg>
49  );
50}
51 
52export { DashRing };