swirling

1"use client";
2 
3function Swirling(props: React.ComponentProps<"svg">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-swirling-spin {
8          to {
9            transform: rotate(360deg);
10          }
11        }
12 
13        @keyframes loading-ui-swirling-dash {
14          0% {
15            stroke-dasharray: 1, 800;
16            stroke-dashoffset: 0;
17          }
18          50% {
19            stroke-dasharray: 400, 400;
20            stroke-dashoffset: -200px;
21          }
22          100% {
23            stroke-dasharray: 800, 1;
24            stroke-dashoffset: -800px;
25          }
26        }
27 
28        .loading-ui-swirling-circle {
29          transform-origin: center;
30          animation:
31            loading-ui-swirling-dash var(--duration, 1.5s) ease-in-out infinite alternate,
32            loading-ui-swirling-spin calc(var(--duration, 1.5s) * 1.333333) linear infinite;
33        }
34      `}</style>
35      <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" {...props}>
36        <circle
37          className="loading-ui-swirling-circle"
38          cx="400"
39          cy="400"
40          r="200"
41          fill="none"
42          stroke="currentColor"
43          strokeLinecap="round"
44          strokeWidth="50"
45        />
46      </svg>
47    </>
48  );
49}
50 
51export { Swirling };