Rework style and loading

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -81,65 +81,21 @@ html, body, #app {
         content: "An error has occurred."
     }
 
-.loading-progress {
-    position: relative;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    margin: 20vh auto 1rem auto;
+#loading-progress {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    animation: loading-background 4s linear infinite;
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
+    #loading-progress > #loading-icon {
+        max-width: 200px;
+        max-height: 200px;
+        animation: loading-icon 4s ease-in-out infinite;
     }
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
-
-.loading-progress-text {
-    color: #000;
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
-}
-
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
-
-code {
-    color: #c02d76;
-}
-
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
-    color: var(--bs-secondary-color);
-    text-align: end;
-}
-
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-    text-align: start;
-}
-
-:focus-visible {
-    outline: none;
-}
-
-.expand-col-2 {
-    grid-column: 1 / 3;
-}
-
-.expand-row-2 {
-    grid-row: 1 / 3;
-}
-
 .body-sm {
     color: #ccc
 }
@@ -158,14 +114,55 @@ code {
     text-decoration: none;
 }
 
+@keyframes loading-background {
+    0% {
+        background: rgb(0, 0, 0, 0.2);
+    }
 
-@keyframes fade-in {
-    0% {opacity: 0}
-    100% {opacity: 1}
+    50% {
+        background: rgb(0, 0, 0, 0.3);
+    }
+
+    100% {
+        background: rgb(0, 0, 0, 0.2);
+    }
+}
+
+
+@keyframes loading-icon {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
 }
 
 @keyframes loading {
-    to {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
         transform: rotate(360deg);
     }
 }