add funny loding screen

This commit is contained in:
blek 2023-12-22 01:23:31 +10:00
parent 03696cf6f8
commit aced5e71e9
Signed by: blek
GPG Key ID: 14546221E3595D0C
3 changed files with 47 additions and 0 deletions

View File

@ -28,3 +28,36 @@
text-align: left; text-align: left;
} }
} }
@keyframes fader-fade {
0% {
opacity: 1;
background: black;
}
to {
opacity: 0;
pointer-events: none;
}
}
.fader {
background: black;
z-index: 3;
animation: fader-fade 3s;
animation-delay: 2s;
animation-fill-mode: forwards;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
p {
animation: fader-fade 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
}

BIN
static/load.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -24,5 +24,19 @@
</a> </a>
</p> </p>
</div> </div>
<div class='screen flicker'></div>
<div class='screen fader'>
<p>
<img src='/load.gif' width='46px' height='48px' style='margin-bottom:8px' /><br/>
Loading...
<span style='font-size:50%;display:block;margin-top:3em;color:#777777 !important'>
Credit for loading gif to
<a href='https://bdragon1727.itch.io/pixel-loading-pack-3'>
BDragon1727
</a>
</span>
</p>
</div>
</body> </body>
</html> </html>