48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import { styled } from '@mui/material/styles';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import nelogo from '../assets/images/logo-sm.png';
|
|
|
|
// Styled Loader Wrapper
|
|
const LoaderWrapper = styled('div')(() => ({
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
zIndex: 2001,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'rgba(255, 255, 255, 0.7)', // Light overlay effect
|
|
padding: '20px',
|
|
borderRadius: '10px' // Soft rounded border
|
|
}));
|
|
|
|
// Styled Logo Wrapper
|
|
const LogoWrapper = styled('div')(() => ({
|
|
position: 'absolute',
|
|
width: '40px', // Adjust based on your logo size
|
|
height: '40px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}));
|
|
|
|
// ==============================|| Custom Circular Loader with Logo ||============================== //
|
|
const CircularLoader = () => (
|
|
<LoaderWrapper>
|
|
{/* Circular Loader */}
|
|
<CircularProgress
|
|
color="primary"
|
|
size={80} // Increase size
|
|
thickness={6} // Thicker border
|
|
/>
|
|
|
|
{/* Logo Positioned at the Center */}
|
|
<LogoWrapper>
|
|
<img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
|
|
</LogoWrapper>
|
|
</LoaderWrapper>
|
|
);
|
|
|
|
export default CircularLoader;
|