80 lines
1.9 KiB
CSS
80 lines
1.9 KiB
CSS
/* Loading bar */
|
|
@keyframes loading{
|
|
0%{
|
|
width: 0px;
|
|
top: calc(50vh - 50px);
|
|
font-family: VT323;
|
|
content: "Loading...";
|
|
transition: ease;
|
|
text-align: center;
|
|
}
|
|
75%{
|
|
width: 300px;
|
|
top: calc(50vh - 50px);
|
|
font-family: VT323;
|
|
content: "Loading...";
|
|
text-align: center;
|
|
}
|
|
75.1%{
|
|
width: 300px;
|
|
top: calc(50vh - 50px);
|
|
font-family: VT323;
|
|
content: "Done!";
|
|
text-align: center;
|
|
}
|
|
85%{
|
|
top: calc(50vh - 100px);
|
|
width: 300px;
|
|
font-family: VT323;
|
|
content: "Done!";
|
|
text-align: center;
|
|
}
|
|
100%{
|
|
top: calc(150vh - 50px);
|
|
width: 300px;
|
|
font-family: VT323;
|
|
content: "Done!";
|
|
text-align: center;
|
|
}
|
|
}
|
|
html::before{
|
|
font-family: VT323;
|
|
content: "Loading...";
|
|
height: 100px;
|
|
position: fixed !important;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
top: calc(150vh - 50px);
|
|
left: calc(50vw - 150px);
|
|
background-color: black;
|
|
color: white !important;
|
|
line-height: 100px;
|
|
white-space: nowrap;
|
|
font-size: 50px !important;
|
|
z-index: 1000000000 !important;
|
|
animation: loading 2s ease !important;
|
|
width: 300px !important;
|
|
box-shadow: 0px 0px 0px 5px white, 0px 50vw 0px calc(50vw + 50vh - 50px) black, 0px 0px 0px 5px white !important;
|
|
/* The box shadow that makes the border is put before and after the background shadow, because of order issues (Firefox displays the first one on top, chrome displays the last one on top) */
|
|
display: block !important;
|
|
}
|
|
html::after{
|
|
font-family: VT323;
|
|
content: "Loading... please wait";
|
|
height: 100px;
|
|
width: 0px;
|
|
position: fixed !important;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
top: calc(150vh - 50px);
|
|
left: calc(50vw - 150px);
|
|
background-color: white;
|
|
color: black !important;
|
|
line-height: 100px;
|
|
z-index: 1000000001 !important;
|
|
white-space: nowrap;
|
|
font-size: 50px !important;
|
|
animation: loading 2s ease !important;
|
|
overflow: hidden !important;
|
|
}
|