29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { LuSignature } from "react-icons/lu";
|
|
import { useSelector } from 'react-redux';
|
|
import { RootState } from '../../store/store';
|
|
|
|
|
|
const Loader = () => {
|
|
|
|
const loaderData = useSelector((state: RootState) => state.loader);
|
|
|
|
return (
|
|
<div className='absolute w-full h-full top-0 left-0 transition-all duration-75'>
|
|
{/* Background */}
|
|
{/* <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-xs"></div> */}
|
|
<div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>
|
|
|
|
{/* Loader */}
|
|
<div className="absolute z-50 w-screen h-screen flex items-center justify-center">
|
|
<div className='bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg'>
|
|
<LuSignature className="text-4xl font-bold animate-text" />
|
|
<p>
|
|
{loaderData.message != undefined ? `${loaderData.message}` : 'Loading ...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Loader |