add style for loading page (#165)

Spylak · web-flow · commit 2449441fc93b · 2023-03-29T16:55:17.000+03:00
diff --git a/ComponentViewer.Wasm/wwwroot/app.css b/ComponentViewer.Wasm/wwwroot/app.css
@@ -15,3 +15,45 @@
 .background-gradient-animation {
     animation: background-gradient 18s ease infinite;
 }
+
+
+.loading-progress {
+    position: relative;
+    display: block;
+    width: 8rem;
+    height: 8rem;
+    margin: 40vh auto 1rem auto;
+}
+
+.loading-progress circle {
+    fill: none;
+    stroke: #bfbbbb;
+    stroke-width: 0.6rem;
+    transform-origin: 50% 50%;
+    transform: rotate(-90deg);
+}
+
+.loading-progress circle:last-child {
+    stroke: white;
+    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+    transition: stroke-dasharray 0.05s ease-in-out;
+}
+
+.loading-progress-text {
+    position: absolute;
+    color: white;
+    text-align: center;
+    font-weight: bold;
+    inset: calc(40vh + 3.25rem) 0 auto 0.2rem;
+}
+.backgroundLoadColor{
+    background: linear-gradient(-45deg,
+    #424242ff,
+    #594ae2ff,
+    #424242ff,
+    #ff4081ff,
+    #424242ff);
+}
+.loading-progress-text:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
diff --git a/ComponentViewer.Wasm/wwwroot/index.html b/ComponentViewer.Wasm/wwwroot/index.html
@@ -15,8 +15,15 @@
 </head>
 
 <body>
-    <div id="app">Loading...</div>
-
+    <div id="app">
+        <div class="backgroundLoadColor" style="height: 100vh;position: absolute;width: 100vw;">
+            <svg class="loading-progress">
+                <circle r="40%" cx="50%" cy="50%" />
+                <circle r="40%" cx="50%" cy="50%" />
+            </svg>
+            <div class="loading-progress-text"></div>
+        </div>
+    </div>
     <div id="blazor-error-ui">
         An unhandled error has occurred.
         <a href="" class="reload">Reload</a>
