diff --git a/crates/wasmeld-console/web/src/host/app.tsx b/crates/wasmeld-console/web/src/host/app.tsx index 86e58fc..4c0a25c 100644 --- a/crates/wasmeld-console/web/src/host/app.tsx +++ b/crates/wasmeld-console/web/src/host/app.tsx @@ -482,9 +482,18 @@ export default function HostApp() {
-
- - 正在加载 {title()} +
+
+ + 正在加载 {title()} +
+
+ +
diff --git a/crates/wasmeld-console/web/src/styles/app.css b/crates/wasmeld-console/web/src/styles/app.css index f52586d..df1807b 100644 --- a/crates/wasmeld-console/web/src/styles/app.css +++ b/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%); + } +}