You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.2 KiB
104 lines
2.2 KiB
import { cn } from "../../core/utils/cn.ts";
|
|
|
|
interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "h-4 w-4",
|
|
md: "h-8 w-8",
|
|
lg: "h-12 w-12",
|
|
};
|
|
|
|
export function Spinner({ className, size = "md", ...props }: SpinnerProps) {
|
|
return (
|
|
<div
|
|
aria-label="Loading..."
|
|
className={cn(
|
|
"flex items-center justify-center fade-in-50 fade-out-50",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<svg
|
|
className={cn("animate-spin-slow stroke-current", sizeClasses[size])}
|
|
role="img"
|
|
aria-label="Loading spinner"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<line
|
|
x1="128"
|
|
y1="32"
|
|
x2="128"
|
|
y2="64"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="195.9"
|
|
y1="60.1"
|
|
x2="173.3"
|
|
y2="82.7"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="224"
|
|
y1="128"
|
|
x2="192"
|
|
y2="128"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="195.9"
|
|
y1="195.9"
|
|
x2="173.3"
|
|
y2="173.3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="128"
|
|
y1="224"
|
|
x2="128"
|
|
y2="192"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="60.1"
|
|
y1="195.9"
|
|
x2="82.7"
|
|
y2="173.3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="32"
|
|
y1="128"
|
|
x2="64"
|
|
y2="128"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
<line
|
|
x1="60.1"
|
|
y1="60.1"
|
|
x2="82.7"
|
|
y2="82.7"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="24"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|