-
-
{voice.progress}%
+
)}
diff --git a/apps/web/src/pages/my-voices/my-voices.css b/apps/web/src/pages/my-voices/my-voices.css
index 1aa43f384..2ea8ffdb2 100644
--- a/apps/web/src/pages/my-voices/my-voices.css
+++ b/apps/web/src/pages/my-voices/my-voices.css
@@ -238,15 +238,43 @@
.xx-mv-progress-bar {
height: 100%;
- background: linear-gradient(
- 90deg,
- var(--accent-color, #f59e0b),
- var(--secondary-color, #10b981)
- );
border-radius: 3px;
transition: width 0.5s ease;
}
+/* Indeterminate 态:条纹流动动画(后端无 progress 字段) */
+.xx-mv-progress--indeterminate {
+ background: var(--bg-tertiary, #f1f5f9);
+}
+
+.xx-mv-progress--indeterminate .xx-mv-progress-bar {
+ width: 100%;
+ background: repeating-linear-gradient(
+ 90deg,
+ var(--accent-color, #f59e0b) 0%,
+ var(--accent-color, #f59e0b) 25%,
+ var(--secondary-color, #10b981) 25%,
+ var(--secondary-color, #10b981) 50%,
+ var(--accent-color, #f59e0b) 50%
+ );
+ background-size: 60px 100%;
+ animation: xx-mv-progress-flow 1.2s linear infinite;
+}
+
+@keyframes xx-mv-progress-flow {
+ from { background-position: 0 0; }
+ to { background-position: 60px 0; }
+}
+
+.xx-mv-progress--indeterminate .xx-mv-progress-text {
+ animation: xx-mv-progress-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes xx-mv-progress-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
.xx-mv-progress-text {
position: absolute;
right: 0;