feat: add loading screen
This commit is contained in:
+24
-1
@@ -15,9 +15,32 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: block;
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
will-change: opacity;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader.hidden {
|
.loader.hidden {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.niko-spin {
|
||||||
|
width: 50vw;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
animation: spin 3s ease-in-out infinite;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
+3
-1
@@ -629,7 +629,9 @@ function Loader() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`loader ${!visible ? 'loader hidden' : ''}`}
|
className={`loader ${!visible ? 'loader hidden' : ''}`}
|
||||||
/>
|
>
|
||||||
|
<img src='/img/niko.jpg' className='niko-spin' />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user