Deploying to gh-pages from @ 70be9fd 🚀

tahaak67 · Mar 30, 2024 · 585e26c · 585e26c
1 parent de981ab
commit 585e26c
Showing 1 changed file with 44 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,11 +3,53 @@
 <head>
     <meta charset="UTF-8">
     <title>Compose App</title>
+    <style>
+        #loading-indicator {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100vh;
+            background-color: #f0f0f0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 9999;
+        }
+
+        .spinner {
+            border: 4px solid rgba(0, 100, 105, 1); /* Color set to 0xFF006971 */
+            border-left-color: rgba(0, 100, 105, 0.1);
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
     <script type="application/javascript" src="skiko.js"></script>
     <script type="application/javascript" src="composeApp.js"></script>
 </head>
 <body>
+<div id="loading-indicator">
+    <!-- Circular loading spinner -->
+    <div class="spinner"></div>
+</div>
 <canvas id="ComposeTarget"></canvas>
-    <script src="openurl.js"></script>
+<script src="openurl.js"></script>
+<script>
+    window.onload = function() {
+        // Hide the loading indicator when the page is fully loaded
+        document.getElementById("loading-indicator").style.display = "none";
+    };
+</script>
 </body>
-</html>
+</html>