triple-dot-spinner

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