62 lines
2.6 KiB
JavaScript
62 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import {MDBCardImage, MDBCol, MDBRow, MDBSpinner} from "mdb-react-ui-kit";
|
|
import Image from "next/image";
|
|
const Loader = () => {
|
|
|
|
return (
|
|
<div style={{ position: 'static '}}>
|
|
<style jsx>
|
|
{
|
|
`
|
|
.label-container{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
align-content: center;
|
|
height: 120%;
|
|
opacity: 100;
|
|
overflow: hidden;
|
|
z-index: 15;
|
|
transition: 2s;
|
|
}
|
|
|
|
.loaderArea {
|
|
background-color: white;
|
|
padding: 10px;
|
|
width: 250%;
|
|
opacity: 100;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 150%;
|
|
z-index: 16;
|
|
border-radius: 15px;
|
|
}
|
|
`
|
|
}
|
|
</style>
|
|
<div style={{ transition: '0.5s',backgroundColor: 'gray', width: '100%',height: '140%',position: 'absolute',zIndex:100,opacity: 0.8,overflow: 'hidden'}}>
|
|
<div className={'label-container'} >
|
|
<div className={'loaderArea'}>
|
|
<img src="/resource/logo/logo-green.png" width={150} alt=""/>
|
|
<div style={{ margin: 5 }}>
|
|
<MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
|
|
<span className='visually-hidden'>Loading...</span>
|
|
</MDBSpinner>
|
|
<MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
|
|
<span className='visually-hidden'>Loading...</span>
|
|
</MDBSpinner>
|
|
<MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
|
|
<span className='visually-hidden'>Loading...</span>
|
|
</MDBSpinner>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Loader; |