infinity

1import { cn } from "@/lib/utils";
2 
3function InfinityLoop({ className, ...props }: React.ComponentProps<"svg">) {
4  return (
5    <svg
6      viewBox="0 0 100 100"
7      preserveAspectRatio="xMidYMid"
8      fill="none"
9      xmlns="http://www.w3.org/2000/svg"
10      className={cn(className)}
11      {...props}
12    >
13      <title>Loading...</title>
14      <style>{`
15        @keyframes loading-ui-infinity-dash {
16          to {
17            stroke-dashoffset: 256.58892822265625;
18          }
19        }
20      `}</style>
21      <path
22        d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
23        stroke="currentColor"
24        strokeWidth="10"
25        strokeLinecap="round"
26        strokeDasharray="205.271142578125 51.317785644531256"
27        style={{
28          transform: "scale(0.8)",
29          transformOrigin: "50px 50px",
30          animationName: "loading-ui-infinity-dash",
31          animationDuration: "var(--duration, 2s)",
32          animationTimingFunction: "linear",
33          animationIterationCount: "infinite",
34        }}
35      />
36    </svg>
37  );
38}
39 
40export { InfinityLoop };