Add styling for loading screen

src/frontend/boards/lc/index.scss

@@ -34,6 +34,28 @@ $gap: 10px;
   cursor: pointer;
 }
 
+@keyframes wobble {
+  0%,
+  10% {
+    transform: rotateY(0turn);
+  }
+
+  50% {
+    transform: rotateY(0.5turn) scale(0.65);
+  }
+
+  90%,
+  100% {
+    transform: rotateY(1turn);
+  }
+}
+
+@keyframes ellipsis {
+  to {
+    width: 20px;
+  }
+}
+
 .soaring-cities {
   background-color: $background;
   color: $black;
@@ -43,6 +65,45 @@ $gap: 10px;
   position: relative;
   font-size: $fontSize;
 
+  .loading {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      display: block;
+      background-size: 192px;
+      background-image: url('./public/logo192.png');
+      background-repeat: no-repeat;
+      background-position: center;
+      animation-name: wobble;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-direction: ease-in-out;
+    }
+
+    > span {
+      position: absolute;
+      top: calc(50% + 96px);
+      left: calc(50% - 4ch);
+
+      &::after {
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: bottom;
+        animation-name: ellipsis;
+        animation-timing-function: steps(4, end);
+        animation-duration: 2s;
+        animation-iteration-count: infinite;
+        content: "…";
+        width: 0px;
+      }
+    }
+  }
+
   table {
     margin: $gap auto;
     border-collapse: collapse;