46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
import { RefreshCw } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import { fmtDate } from './utils';
|
|
|
|
export default function DailyReportLoadingOverlay({ reportDate }: { reportDate: string }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.16, ease: 'easeOut' }}
|
|
role="status"
|
|
aria-live="polite"
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/20 p-5 backdrop-blur-[2px]"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12, scale: 0.96 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 8, scale: 0.98 }}
|
|
transition={{ duration: 0.22, ease: 'easeOut' }}
|
|
className="w-full max-w-[260px] overflow-hidden rounded-xl border border-slate-100 bg-white p-5 text-center shadow-2xl"
|
|
>
|
|
<div className="relative mx-auto flex h-12 w-12 items-center justify-center">
|
|
<motion.span
|
|
className="absolute inset-0 rounded-full border-2 border-blue-100"
|
|
animate={{ scale: [0.86, 1.15], opacity: [0.9, 0] }}
|
|
transition={{ duration: 1.2, repeat: Infinity, ease: 'easeOut' }}
|
|
/>
|
|
<span className="relative flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 text-blue-600">
|
|
<RefreshCw size={19} className="animate-spin" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-3 text-sm font-black text-slate-900">正在加载日报</div>
|
|
<div className="mt-1 text-[11px] font-bold text-slate-400">正在汇总 {fmtDate(reportDate)} 的里程数据</div>
|
|
<div className="mt-4 h-1 overflow-hidden rounded-full bg-slate-100">
|
|
<motion.div
|
|
className="h-full w-1/2 rounded-full bg-blue-500"
|
|
animate={{ x: ['-100%', '220%'] }}
|
|
transition={{ duration: 1.15, repeat: Infinity, ease: 'easeInOut' }}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|