concentric-ring

1import { cn } from "@/lib/utils";
2 
3function ConcentricRing({ className, ...props }: React.ComponentProps<"span">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-concentric-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("relative inline-block", className)}
20        style={{
21          animation:
22            "loading-ui-concentric-ring-rotation var(--duration, 1s) linear infinite",
23        }}
24        {...props}
25      >
26        <span
27          aria-hidden="true"
28          className="absolute inset-0 rounded-full border-2 border-current"
29          style={{ opacity: 0.25 }}
30        />
31        <span
32          aria-hidden="true"
33          className="absolute top-1/2 left-1/2 rounded-full border-2 border-transparent border-b-current"
34          style={{
35            width: "83.333%",
36            height: "83.333%",
37            transform: "translate(-50%, -50%)",
38          }}
39        />
40        <span className="sr-only">Loading</span>
41      </span>
42    </>
43  );
44}
45 
46export { ConcentricRing };