Starter Layout update

Tewr · Tewr · commit dcb68f6205d0 · 2025-07-21T22:31:58.000+02:00
diff --git a/src/BlazorWorker.Demo/Net9/BLazorWorker.Demo.Client/wwwroot/css/app.css b/src/BlazorWorker.Demo/Net9/BLazorWorker.Demo.Client/wwwroot/css/app.css
@@ -69,8 +69,8 @@ a, .btn-link {
 .loading-progress {
     position: relative;
     display: block;
-    width: 8rem;
-    height: 8rem;
+    width: 16rem;
+    height: 16rem;
     margin: 20vh auto 1rem auto;
 }
 
diff --git a/src/BlazorWorker.Demo/Net9/BLazorWorker.Demo.Client/wwwroot/index.html b/src/BlazorWorker.Demo/Net9/BLazorWorker.Demo.Client/wwwroot/index.html
@@ -14,9 +14,6 @@
 
 <body>
     <div id="app">
-        <div style="margin: 100px auto; width: 500px; height: 120px; text-align: center; ">
-            <img src="loading-icon.svg" width="97" height="88" />
-        </div>
         <svg class="loading-progress">
             <circle r="40%" cx="50%" cy="50%" />
             <circle r="40%" cx="50%" cy="50%" />
@@ -31,6 +28,31 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            const app = document.getElementById('app');
+            const svg = app.querySelector('.loading-progress');
+
+            if (!svg) return;
+
+            // Get position and size of SVG
+            const rect = svg.getBoundingClientRect();
+
+            // Create the image element
+            const img = document.createElement('img');
+            img.src = 'loading-icon.svg';
+            img.width = 97;
+            img.height = 88;
+            img.style.position = 'absolute';
+            img.style.left = rect.left + window.scrollX + rect.width / 2 - 97 / 2 + 'px';
+            img.style.top = rect.top + window.scrollY + rect.height / 2 - 88 / 2  + 'px';
+            img.style.pointerEvents = 'none';
+            img.style.zIndex = '9999';
+
+            // Add it to the body
+            document.getElementById("app").appendChild(img);
+        });
+    </script>
 </body>
 
 </html>
