29 lines
1.7 KiB
TypeScript
29 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
export default function NavigationLoader() {
|
|
return (
|
|
<div
|
|
className="nav-loader-overlay fixed inset-0 z-[9999] flex items-center justify-center"
|
|
role="status"
|
|
aria-busy="true"
|
|
aria-label="Loading"
|
|
>
|
|
<div className="nav-loader-backdrop absolute inset-0 bg-white/55 dark:bg-gray-950/65 backdrop-blur-md" />
|
|
|
|
<div className="nav-loader-progress absolute inset-x-0 top-0 h-1 overflow-hidden">
|
|
<div className="nav-loader-progress-bar h-full w-full" />
|
|
</div>
|
|
|
|
<div className="nav-loader-orbit relative flex h-28 w-28 items-center justify-center">
|
|
<span className="nav-loader-ring nav-loader-ring-1 absolute inset-0 rounded-full border-2 border-transparent" />
|
|
<span className="nav-loader-ring nav-loader-ring-2 absolute inset-2 rounded-full border-2 border-transparent" />
|
|
<span className="nav-loader-ring nav-loader-ring-3 absolute inset-4 rounded-full border-2 border-transparent" />
|
|
<span className="nav-loader-dot nav-loader-dot-1 absolute left-1/2 top-0 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.9)]" />
|
|
<span className="nav-loader-dot nav-loader-dot-2 absolute bottom-1 right-2 h-2 w-2 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.85)]" />
|
|
<span className="nav-loader-dot nav-loader-dot-3 absolute bottom-3 left-2 h-1.5 w-1.5 rounded-full bg-[#ff7a45] shadow-[0_0_8px_rgba(255,122,69,0.85)]" />
|
|
<span className="nav-loader-core absolute h-10 w-10 rounded-full bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-500 shadow-[0_0_40px_rgba(20,184,166,0.45)]" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|