linuxposting/tilde-site
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

loading animations :3

Browse source
This commit is contained in:
Luna 2025-11-14 19:56:44 -03:00
parent e4cb05c9e2
commit 1a54014e50
3 changed files with 88 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
assets/base.css
View file

@ -95,4 +95,86 @@ main {
height: 100%;
padding: 16px;
box-sizing: border-box;
}
/* loading animation */
@keyframes appear {
0% {
visibility: visible;
display: block
}
99% {
visibility: hidden;
display: none
}
}
.nojs {
animation: 4.5s 1 reverse appear;
animation-delay: 4.5s;
animation-fill-mode: forwards;
visibility: hidden;
position: fixed
}
.credit {
animation: 4.5s 1 reverse appear;
animation-delay: 4.5s;
animation-fill-mode: forwards;
visibility: hidden;
position: fixed
}
.loading > p:first-child {
animation: 1s 1 linear appear;
animation-fill-mode: forwards;
visibility: hidden;
position: fixed
}
.loading > p:not(:first-child):not(:last-child) {
animation: 1s 1 linear appear;
animation-delay: 1s;
animation-fill-mode: forwards;
visibility: hidden;
position: fixed
}
.loading > p:last-child {
animation: 1s 1 linear appear;
animation-delay: 2s;
animation-fill-mode: forwards;
visibility: hidden;
position: fixed
}
@keyframes splash {
0%, 100% {
display: block;
position: fixed;
color: var(--c-bg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.ascii {
animation-duration: 1.5s, 1.5s;
animation-iteration-count: 1, 1;
animation-timing-function: linear, linear;
animation-name: appear, splash;
animation-delay: 3s, 3s;
}
@keyframes splash-bg {
0%, 100% {
background-color: var(--c-splash);
}
}
html {
animation: 1.5s 1 linear splash-bg;
animation-delay: 3s
}