add funny loding screen

sass/screen.scss

@@ -28,3 +28,36 @@
         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;
+    }
+}

templates/base.html

@@ -24,5 +24,19 @@
                 </a>
             </p>
         </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>
 </html>