Add booting screen

oegea · Jul 8, 2023 · dbea0e3 · dbea0e3 · vercel · Jul 8, 2023
1 parent 681b00f
commit dbea0e3
Showing 1 changed file with 69 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,75 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="changelog"></div>
-    <div id="root"></div>
+    <div id="root">
+      <style>
+        .loader,
+        .loader:before,
+        .loader:after {
+          border-radius: 50%;
+          width: 2.5em;
+          height: 2.5em;
+          -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+          -webkit-animation: load7 1.8s infinite ease-in-out;
+          animation: load7 1.8s infinite ease-in-out;
+        }
+        .loader {
+          color: #4f4f4f;
+          font-size: 10px;
+          margin: 0 auto;
+          position: relative;
+          text-indent: -9999em;
+          -webkit-transform: translateZ(0);
+          -ms-transform: translateZ(0);
+          transform: translateZ(0);
+          -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+        }
+        .loader:before,
+        .loader:after {
+          content: '';
+          position: absolute;
+          top: 0;
+        }
+        .loader:before {
+          left: -3.5em;
+          -webkit-animation-delay: -0.32s;
+          animation-delay: -0.32s;
+        }
+        .loader:after {
+          left: 3.5em;
+        }
+        @-webkit-keyframes load7 {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+        @keyframes load7 {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+      </style>
+      <!-- center everything display flex -->
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70vh;">
+        <h2>Passager</h2>
+        <p>Is loading, please wait / Cargando, por favor espere</p>
+        <span class="loader"></span>
+      </div>
+
+
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.