satellite-ring

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