LoadingSpinner.tsx•1.83 kB
import React from 'react'
export interface LoadingSpinnerProps {
size?: 'sm' | 'md' | 'lg'
color?: 'primary' | 'white' | 'gray'
className?: string
}
const sizeClasses = {
sm: 'h-4 w-4',
md: 'h-6 w-6',
lg: 'h-8 w-8'
}
const colorClasses = {
primary: 'text-blue-600',
white: 'text-white',
gray: 'text-gray-600'
}
export default function LoadingSpinner({
size = 'md',
color = 'primary',
className = ''
}: LoadingSpinnerProps) {
return (
<svg
className={`animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
xmlns="http://www.w3.org/2000/svg"
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>
)
}
export function LoadingWithText({
text = '加载中...',
size = 'md',
className = ''
}: LoadingSpinnerProps & { text?: string }) {
return (
<div className={`flex items-center justify-center space-x-2 ${className}`}>
<LoadingSpinner size={size} />
<span className="text-gray-600 dark:text-gray-400">{text}</span>
</div>
)
}
/**
* 全屏加载组件
*/
export function FullScreenLoading({ text = '加载中...' }: { text?: string }) {
return (
<div className="fixed inset-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex items-center justify-center z-50">
<div className="text-center">
<LoadingSpinner size="lg" />
<p className="mt-4 text-gray-600 dark:text-gray-400">{text}</p>
</div>
</div>
)
}