48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
type HomeBootOverlayProps = {
|
|
visible: boolean;
|
|
/** 默认：正在同步会员状态… */
|
|
subtitle?: string;
|
|
};
|
|
|
|
/**
|
|
* 全屏加载（登录验证、首屏等按需使用）
|
|
*/
|
|
export function HomeBootOverlay({ visible, subtitle }: HomeBootOverlayProps) {
|
|
if (!visible) return null;
|
|
|
|
const line = subtitle ?? "正在同步会员状态…";
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[200] flex flex-col items-center justify-center gap-6 bg-[var(--background)]/92 backdrop-blur-md"
|
|
aria-busy="true"
|
|
aria-live="polite"
|
|
>
|
|
<div className="relative flex h-20 w-20 items-center justify-center">
|
|
<div
|
|
className="absolute inset-0 animate-spin rounded-full border-2 border-amber-500/20 border-t-amber-500"
|
|
style={{ animationDuration: "1.05s" }}
|
|
/>
|
|
<div
|
|
className="absolute inset-2 animate-spin rounded-full border-2 border-transparent border-b-amber-400/50"
|
|
style={{ animationDuration: "0.75s", animationDirection: "reverse" }}
|
|
/>
|
|
<span
|
|
className="animate__animated animate__pulse animate__infinite text-3xl drop-shadow-sm"
|
|
aria-hidden
|
|
>
|
|
🌍
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-1 px-6 text-center">
|
|
<p className="text-base font-semibold tracking-wide text-[var(--foreground)]">
|
|
异度星球
|
|
</p>
|
|
<p className="text-sm text-[var(--muted-foreground)]">{line}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|