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
}

1
assets/colors.css
View file

@ -2,6 +2,7 @@
--c-bg: #11111b;
--c-fg: #cdd6f4;
--c-border: #74c7ec;
--c-splash: #74c7ec;
--c-highlight: #cba6f7;
--c-title: #fab387;
}

5
index.html
View file

@ -9,6 +9,11 @@
<link rel="icon" href="/assets/molly.svg">
</head>
<body>
<div class="loading">
<p>Connecting.</p>
<p>Connecting..</p>
<p>Connecting...</p>
</div>
<div class="nojs"><main>
<span class="title nojs">Linuxposting Tilde</span>
<div class="ascii ascii-1">│. .