ring

1import { cn } from "@/lib/utils";
2 
3function Ring({ className, style, ...props }: React.ComponentProps<"svg">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-ring-spin {
8          to {
9            transform: rotate(360deg);
10          }
11        }
12      `}</style>
13      <svg
14        viewBox="0 0 24 24"
15        fill="none"
16        xmlns="http://www.w3.org/2000/svg"
17        className={cn(className)}
18        style={{
19          animationName: "loading-ui-ring-spin",
20          animationDuration: "var(--duration, 1s)",
21          animationTimingFunction: "linear",
22          animationIterationCount: "infinite",
23          ...style,
24        }}
25        {...props}
26      >
27        <path
28          d="M21 12.0004C20.9999 13.901 20.3981 15.7528 19.2809 17.2904C18.1637 18.8279 16.5885 19.9723 14.7809 20.5596C12.9733 21.1469 11.0262 21.1468 9.21864 20.5594C7.41109 19.9721 5.83588 18.8276 4.71876 17.29C3.60165 15.7523 2.99999 13.9005 3 11.9999C3.00001 10.0993 3.60171 8.24755 4.71884 6.70994C5.83598 5.17233 7.4112 4.02785 9.21877 3.44052C11.0263 2.85319 12.9734 2.85316 14.781 3.44044"
29          stroke="currentColor"
30          strokeWidth="2"
31          strokeLinecap="round"
32          strokeLinejoin="round"
33        />
34      </svg>
35    </>
36  );
37}
38 
39export { Ring };