Files
family_budget/frontend/src/components/ui/LoadingSpinner.tsx
2026-01-29 15:17:54 +03:00

33 lines
816 B
TypeScript

interface LoadingSpinnerProps {
size?: 'sm' | 'md' | 'lg';
fullScreen?: boolean;
text?: string;
}
export function LoadingSpinner({ size = 'md', fullScreen = false, text }: LoadingSpinnerProps) {
const sizeClasses = {
sm: 'w-6 h-6 border-2',
md: 'w-10 h-10 border-3',
lg: 'w-16 h-16 border-4',
};
const spinner = (
<div className="flex flex-col items-center gap-3">
<div
className={`${sizeClasses[size]} border-blue-600 border-t-transparent rounded-full animate-spin`}
></div>
{text && <p className="text-gray-600 dark:text-gray-400">{text}</p>}
</div>
);
if (fullScreen) {
return (
<div className="fixed inset-0 bg-white dark:bg-gray-900 flex items-center justify-center z-50">
{spinner}
</div>
);
}
return spinner;
}