feat: enhance VM console loading UI with a new spinner and status text styles

public/css/service/console.css

@@ -1,72 +1,84 @@
 /* Admin Console */
 
-/* Loading Animation Styles */
+/* Simple Loading Container */
 .loading-container {
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    background: #1a1a2e;
     min-height: 500px;
     position: relative;
     overflow: hidden;
 }
 
-.loading-spinner {
-    width: 60px;
-    height: 60px;
-    border: 4px solid rgba(255, 255, 255, 0.2);
-    border-left: 4px solid #007bff;
+/* LDS Roller Spinner */
+.lds-roller,
+.lds-roller div,
+.lds-roller div:after {
+    box-sizing: border-box;
+}
+
+.lds-roller {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-roller div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+}
+
+.lds-roller div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7.2px;
+    height: 7.2px;
     border-radius: 50%;
-    animation: spin 1s linear infinite;
+    background: currentColor;
+    margin: -3.6px 0 0 -3.6px;
 }
 
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
+.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
+.lds-roller div:nth-child(1):after { top: 62.62742px; left: 62.62742px; }
+.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
+.lds-roller div:nth-child(2):after { top: 67.71281px; left: 56px; }
+.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
+.lds-roller div:nth-child(3):after { top: 70.90963px; left: 48.28221px; }
+.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
+.lds-roller div:nth-child(4):after { top: 72px; left: 40px; }
+.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
+.lds-roller div:nth-child(5):after { top: 70.90963px; left: 31.71779px; }
+.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
+.lds-roller div:nth-child(6):after { top: 67.71281px; left: 24px; }
+.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
+.lds-roller div:nth-child(7):after { top: 62.62742px; left: 17.37258px; }
+.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
+.lds-roller div:nth-child(8):after { top: 56px; left: 12.28719px; }
 
-    100% {
-        transform: rotate(360deg);
-    }
+@keyframes lds-roller {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
-.loading-dots {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
+/* Simple Loading Text */
+.loading-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 10px;
 }
 
-.loading-dots span {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #007bff;
-    animation: pulse 1.4s ease-in-out infinite both;
+.loading-text {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.9rem;
 }
 
-.loading-dots span:nth-child(1) {
-    animation-delay: -0.32s;
-}
-
-.loading-dots span:nth-child(2) {
-    animation-delay: -0.16s;
-}
-
-.loading-dots span:nth-child(3) {
-    animation-delay: 0s;
-}
-
-@keyframes pulse {
-    0%,
-    80%,
-    100% {
-        transform: scale(0.7);
-        opacity: 0.5;
-    }
-
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
+.loading-status {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.8rem;
 }
 
+/* Legacy styles */
 .console-container {
     transition: all 0.5s ease-in-out;
     min-height: 500px;
@@ -76,34 +88,6 @@
     transition: opacity 0.4s ease-in-out;
 }
 
-.spinner-box {
-    width: 300px;
-    height: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: transparent;
-}
-
-.three-quarter-spinner {
-    width: 50px;
-    height: 50px;
-    border: 3px solid #fb5b53;
-    border-top: 3px solid transparent;
-    border-radius: 50%;
-    animation: spin 0.5s linear 0s infinite;
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0);
-    }
-
-    to {
-        transform: rotate(359deg);
-    }
-}
-
 
 /* User Console */
 .console-container {