Use loading text (#169)

benjaminsampica · Nov 9, 2022 · 15e1f14 · 15e1f14
1 parent 3ab6cf4
commit 15e1f14
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 23 deletions.
diff --git a/src/Client/wwwroot/css/app.css b/src/Client/wwwroot/css/app.css
@@ -1,7 +1,4 @@
-/* TODO: Add local version for offline */
-@import url('https://fonts.googleapis.com/css?family=Graduate|Open+Sans:300&display=swap');
-
-.grow {
+.grow {
     transition: all .2s ease-in-out;
 }
 
@@ -37,23 +34,12 @@ html, body {
     max-width: 400px;
 }
 
-.loader {
-    border: 16px solid rgba(0, 0, 0, 0.00);
-    border-top: 16px solid #594ae2;
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
+.loading-progress-text:after {
+    content: var(--blazor-load-percentage-text);
+    color: rgba(89,74,226,0.55);
+    font-weight: bold;
+    font-size: 60px;
+    font-family: "Graduate", sans-serif;
 }
 
 /* MudBlazor overrides */

diff --git a/src/Client/wwwroot/index.html b/src/Client/wwwroot/index.html
@@ -7,6 +7,7 @@
     <title>Dynamo League</title>
     <base href="/" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Graduate|Open+Sans:300&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <!--
@@ -23,8 +24,7 @@
     <div id="app">
         <div id="loading">
             <img src="logo.png" />
-            <br /> <br /> <br />
-            <div class="loader"></div>
+            <h1 class="loading-progress-text"></h1>
         </div>
     </div>
     <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>