Add loading component

This commit is contained in:
Fred Boniface 2023-06-17 21:42:00 +01:00
parent 6e6e655a19
commit fe9a00d52d

View File

@ -0,0 +1,49 @@
<div id="container">
<div class="spinner"></div>
<p>Loading...</p>
</div>
<style>
@keyframes spinner {
0% {
transform:translate3d(-50%,-50%,0) rotate(0)
}
100% {
transform:translate3d(-50%,-50%,0) rotate(360deg)
}
}
.spinner::before {
animation:1.5s linear infinite spinner;
animation-play-state:inherit;
border:solid 5px var(--overlay-color);
border-bottom-color: white;
border-radius:50%;
content:"";
height:40px;
width:40px;
position:absolute;
top:30%;
margin:auto;
transform:translate3d(-50%,-50%,0);
will-change:transform
}
#container {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:auto;
background-color:var(--overlay-color);
border-radius:15px;
padding:20px;
padding-bottom:1px;
min-width:90px;
max-width:90px
}
p {
padding-top:50px;
font-weight:bolder;
overflow-wrap:normal;
color: white;
}
</style>