You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
43 lines
1.2 KiB
6 months ago
|
import React from 'react';
|
||
|
|
|
||
|
|
const PageLoader = () => {
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50">
|
||
|
|
<div className="flex flex-col items-center justify-center space-y-8">
|
||
|
|
<div className="relative w-40">
|
||
|
|
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
||
|
|
<div className="bg-white dark:bg-gray-900 rounded-full ">
|
||
|
|
<h1 className="text-xl font-bold text-primary dark:text-blue-400 animate-pulse">
|
||
|
|
KJ HRMS
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="w-52 h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
|
||
|
|
<div className="h-full bg-primary animate-[loading_1.5s_ease-in-out_infinite]"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style jsx>{`
|
||
|
|
@keyframes loading {
|
||
|
|
0% {
|
||
|
|
width: 0%;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
width: 100%;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
width: 0%;
|
||
|
|
margin-left: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PageLoader;
|