Add loading splash

qgis · Sep 3, 2020 · 8734b66 · 8734b66
1 parent 26f405d
commit 8734b66
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -12,8 +12,49 @@
         <link rel="apple-touch-icon" sizes="114x114" href="assets/img/app_icon_114.png"/>
         <link rel="apple-touch-icon" sizes="144x144" href="assets/img/app_icon_144.png"/>
         <link rel="icon" href="assets/img/favicon.ico" />
+        <style type="text/css">
+        div#splash {
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .lds-dual-ring {
+            display: inline-block;
+            width: 80px;
+            height: 80px;
+            }
+            .lds-dual-ring:after {
+            content: " ";
+            display: block;
+            width: 64px;
+            height: 64px;
+            margin: 8px;
+            border-radius: 50%;
+            border: 6px solid #595959;
+            border-color: #595959 transparent #595959 transparent;
+            animation: lds-dual-ring 1.2s linear infinite;
+        }
+        @keyframes lds-dual-ring {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        </style>
+        <script type="text/javascript">
+        window.onload = function() { document.getElementById('splash').style.display = 'none'; }
+        </script>
     </head>
     <body>
+        <div id="splash"><div class="lds-dual-ring"></div></div>
         <div id="container"></div>
         <script src="dist/QWC2App.js"></script>
     </body>