show loading animation

JosuaKrause · Aug 6, 2023 · 211b7bd · 211b7bd
1 parent 66f2c51
commit 211b7bd
Showing 1 changed file with 114 additions and 0 deletions.
diff --git a/style/index.css b/style/index.css
@@ -1,3 +1,5 @@
+/* general */
+
 * {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
@@ -20,6 +22,90 @@ body {
   }
 }
 
+/* pre loading */
+
+@keyframes blink {
+  0% {
+    background-color: white;
+  }
+  50% {
+    background-color: #efefef;
+  }
+  100% {
+    background-color: white;
+  }
+}
+
+.header:empty {
+  width: 400px;
+  height: 29px;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 2s infinite ease-in-out;
+  filter: blur(5px);
+}
+
+.topbar:empty {
+  width: 802px;
+  height: 31.383px;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 2s infinite ease-in-out;
+  filter: blur(5px);
+}
+
+.main:empty {
+  width: 802px;
+  height: 602px;
+  border: none;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 2s infinite ease-in-out;
+  filter: blur(5px);
+}
+
+.bottombar:empty {
+  width: 802px;
+  height: 30px;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 2s infinite ease-in-out;
+  filter: blur(5px);
+}
+
+.footer:empty {
+  width: 500px;
+  height: 40px;
+  transition: all 0.5s ease-in-out;
+  animation: blink normal 2s infinite ease-in-out;
+  filter: blur(5px);
+}
+
+@media (hover: none) and (max-width: 480px) {
+  .header:empty {
+    width: 70vw;
+    height: 56px;
+  }
+
+  .topbar:empty {
+    width: calc(100vw - 10px);
+    height: 127px;
+  }
+
+  .main:empty {
+    width: 100vw;
+    height: calc(75vw + 0.5px);
+  }
+
+  .bottombar:empty {
+    width: calc(100vw - 10px);
+    height: 67px;
+  }
+
+  .footer:empty {
+    width: 80vw;
+    height: 88px;
+  }
+}
+
+/* links */
+
 a,
 a:visited {
   color: black;
@@ -30,13 +116,23 @@ a:focus {
   color: #444;
 }
 
+/* header */
+
+.header {
+  height: 29px;
+}
+
 .header div,
 .header span,
 .header a {
   font-weight: 500;
 }
 
 @media (hover: none) and (max-width: 480px) {
+  .header {
+    height: auto;
+  }
+
   .header div,
   .header span,
   .header a {
@@ -47,6 +143,8 @@ a:focus {
   }
 }
 
+/* footer */
+
 .footer {
   display: flex;
   flex-direction: column;
@@ -78,6 +176,8 @@ a:focus {
   }
 }
 
+/* copyright */
+
 footer {
   position: fixed;
   bottom: 0;
@@ -99,6 +199,8 @@ footer {
   pointer-events: fill;
 }
 
+/* help text */
+
 .normalonly {
   display: block;
 }
@@ -117,6 +219,8 @@ footer {
   }
 }
 
+/* controls */
+
 input {
   line-height: 20px;
   vertical-align: middle;
@@ -158,6 +262,8 @@ label::after {
   content: '\00a0';
 }
 
+/* canvas area */
+
 .main {
   position: relative;
   border: 1px solid black;
@@ -204,6 +310,8 @@ canvas {
   }
 }
 
+/* control panel */
+
 .topbar {
   display: flex;
   justify-content: flex-start;
@@ -251,6 +359,8 @@ canvas {
   }
 }
 
+/* info panel */
+
 .bottombar {
   display: flex;
   justify-content: flex-start;
@@ -292,6 +402,8 @@ canvas {
   font-family: 'Courier New', Courier, monospace;
 }
 
+/* scene */
+
 .hmain {
   display: flex;
   justify-content: center;
@@ -319,6 +431,8 @@ canvas {
   }
 }
 
+/* errors */
+
 #error {
   position: fixed;
   top: 10px;