diff --git a/assets/base.css b/assets/base.css
index 01202e7..1bd9fdd 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -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
}
\ No newline at end of file
diff --git a/assets/colors.css b/assets/colors.css
index c689d39..89f5544 100644
--- a/assets/colors.css
+++ b/assets/colors.css
@@ -2,6 +2,7 @@
--c-bg: #11111b;
--c-fg: #cdd6f4;
--c-border: #74c7ec;
+ --c-splash: #74c7ec;
--c-highlight: #cba6f7;
--c-title: #fab387;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0eb38e2..c2d67eb 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,11 @@
+
+
Connecting.
+
Connecting..
+
Connecting...
+