55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import CustomPortal from "./custom-portal";
|
|
|
|
interface PropsLoading {
|
|
loading?: boolean;
|
|
}
|
|
|
|
const SCALE = 2.5;
|
|
|
|
export default function CustomLoading({ loading }: PropsLoading) {
|
|
if (!loading) return null;
|
|
|
|
return (
|
|
<CustomPortal>
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black/60 z-[10002]">
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
width: 40 * SCALE,
|
|
height: 40 * SCALE,
|
|
}}
|
|
>
|
|
{Array.from({ length: 12 }).map((_, i) => {
|
|
const rotate = i * 30;
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
transformOrigin: `${20 * SCALE}px ${20 * SCALE}px`,
|
|
transform: `rotate(${rotate}deg)`,
|
|
animation: "spinnerFade 1.2s linear infinite",
|
|
animationDelay: `${-(1.1 - i * 0.1)}s`,
|
|
}}
|
|
className="absolute top-0 left-0 w-full h-full"
|
|
>
|
|
<div
|
|
style={{
|
|
top: 1.5 * SCALE,
|
|
left: 18.5 * SCALE,
|
|
width: 3 * SCALE,
|
|
height: 9 * SCALE,
|
|
}}
|
|
className="absolute bg-white rounded-sm"
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</CustomPortal>
|
|
);
|
|
}
|