53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Users, Briefcase, Building2 } from "lucide-react";
|
|
|
|
const CustomAppLoader = () => {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
// HRM related icons
|
|
const icons = [
|
|
{ component: Users, key: "users" },
|
|
{ component: Briefcase, key: "briefcase" },
|
|
{ component: Building2, key: "building" },
|
|
];
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % icons.length);
|
|
}, 800); // Slower, smoother transition
|
|
|
|
return () => clearInterval(interval);
|
|
}, [icons.length]);
|
|
|
|
const ActiveIcon = icons[currentIndex].component;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center space-y-6 h-screen w-full ">
|
|
<div className="relative flex items-center justify-center">
|
|
{/* Outer Spinning Ring */}
|
|
<div className="w-20 h-20 border-4 border-gray-200 border-t-[#0B3B6A] rounded-full animate-spin"></div>
|
|
|
|
{/* Icon Container */}
|
|
<div className="absolute flex items-center justify-center">
|
|
<ActiveIcon
|
|
key={icons[currentIndex].key}
|
|
size={32}
|
|
className="text-[#0B3B6A] transition-all duration-500 opacity-100"
|
|
strokeWidth={1.5}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-1">
|
|
<h3 className="text-[#0B3B6A] font-semibold text-lg tracking-wide">
|
|
HRM System
|
|
</h3>
|
|
<span className="text-gray-500 text-sm animate-pulse">
|
|
Loading resources...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomAppLoader; |