feat(console-web): add swinging iframe load progress

- place an indeterminate progress track below the loading label
- animate the indicator between both ends of the track
- expose an accessible progressbar label for the active view
- honor reduced-motion preferences with a static indicator

crates/wasmeld-console/web/src/host/app.tsx

@@ -482,10 +482,19 @@ export default function HostApp() {
         </For>
         <Show when={!frameReady()}>
           <div class="pointer-events-none absolute inset-0 flex items-center justify-center bg-canvas">
-            <div class="flex items-center gap-2 text-sm text-muted">
+            <div class="flex flex-col items-center gap-3 text-sm text-muted">
+              <div class="flex items-center gap-2">
                 <span class="size-2 animate-pulse rounded-full bg-brand" />
                 正在加载 {title()}
               </div>
+              <div
+                class="loading-progress-track"
+                role="progressbar"
+                aria-label={`${title()}加载进度`}
+              >
+                <span class="loading-progress-indicator" />
+              </div>
+            </div>
           </div>
         </Show>
         <Show when={connection() === "offline"}>

crates/wasmeld-console/web/src/styles/app.css

@@ -317,13 +317,39 @@
     @apply h-3 animate-pulse rounded-sm bg-[#dfe6e4];
   }
 
+  .loading-progress-track {
+    @apply h-1 w-40 overflow-hidden rounded-sm bg-line;
+  }
+
+  .loading-progress-indicator {
+    @apply block h-full w-[36%] rounded-sm bg-brand;
+    animation: loading-progress-swing 1s ease-in-out infinite alternate;
+  }
+
   .spin {
     animation: spin 0.8s linear infinite;
   }
 }
 
+@keyframes loading-progress-swing {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(178%);
+  }
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-progress-indicator {
+    animation: none;
+    transform: translateX(89%);
+  }
+}