twin-orbit

1import { cn } from "@/lib/utils";
2 
3function TwinOrbit({ className, ...props }: React.ComponentProps<"span">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-twin-orbit-rotate {
8          100% {
9            transform: rotate(360deg) translate(155%);
10          }
11        }
12      `}</style>
13      <span
14        role="status"
15        className={cn(
16          "relative inline-block aspect-square rounded-full bg-current",
17          className,
18        )}
19        {...props}
20      >
21        <span
22          aria-hidden="true"
23          className="absolute inset-0 rounded-full bg-current"
24          style={{
25            transform: "rotate(0deg) translate(155%)",
26            animation:
27              "loading-ui-twin-orbit-rotate var(--duration, 1s) ease infinite",
28          }}
29        />
30        <span
31          aria-hidden="true"
32          className="absolute inset-0 rounded-full bg-current"
33          style={{
34            transform: "rotate(0deg) translate(155%)",
35            animation:
36              "loading-ui-twin-orbit-rotate var(--duration, 1s) ease infinite",
37            animationDelay: "calc(var(--duration, 1s) / 2)",
38          }}
39        />
40        <span className="sr-only">Loading</span>
41      </span>
42    </>
43  );
44}
45 
46export { TwinOrbit };