55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
interface LoadingSpinnerProps {
|
|
size?: "sm" | "md" | "lg";
|
|
color?: "blue" | "red" | "green" | "gray" | "white";
|
|
text?: string;
|
|
}
|
|
|
|
export default function LoadingSpinner({
|
|
size = "md",
|
|
color = "blue",
|
|
text,
|
|
}: LoadingSpinnerProps) {
|
|
const sizeClasses = {
|
|
sm: "w-4 h-4",
|
|
md: "w-8 h-8",
|
|
lg: "w-12 h-12",
|
|
};
|
|
|
|
const colorClasses = {
|
|
blue: "text-blue-500",
|
|
red: "text-red-500",
|
|
green: "text-green-500",
|
|
gray: "text-gray-500",
|
|
white: "text-white",
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div
|
|
className={`${sizeClasses[size]} ${colorClasses[color]} animate-spin`}
|
|
>
|
|
<svg className="w-full h-full" fill="none" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
{text && (
|
|
<div className="mt-2 text-sm text-gray-500 animate-pulse">{text}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|