diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index 9ff286c..986b329 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -55,6 +55,15 @@
                 <span>{{ fmtTime(v.created_at) }}</span>
               </div>
 
+              <!-- Download progress bar -->
+              <div v-if="v.status === 'downloading'" class="dl-progress">
+                <div class="dl-bar-wrap">
+                  <div class="dl-bar-fill" :class="{ 'dl-bar-indeterminate': v.progress <= 1 }"
+                    :style="v.progress > 1 ? { width: v.progress + '%' } : {}"></div>
+                </div>
+                <span class="dl-pct">{{ v.progress > 1 ? v.progress + '%' : '…' }}</span>
+              </div>
+
               <!-- Error message -->
               <div v-if="v.status === 'error' && v.error_message" class="error-msg" :title="v.error_message">
                 ⚠️ {{ v.error_message }}
@@ -542,6 +551,17 @@ onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
   line-height: 1; padding: 0; margin-top: 2px; transition: background 0.2s;
 }
 .ring-cancel:hover { background: rgba(231,76,60,0.35); }
+
+/* Download progress bar */
+.dl-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.dl-bar-wrap { flex: 1; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
+.dl-bar-fill { height: 100%; background: #1da1f2; border-radius: 3px; transition: width 0.4s; min-width: 4px; }
+.dl-bar-indeterminate { width: 30% !important; animation: bar-slide 1.2s ease-in-out infinite; }
+@keyframes bar-slide {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+.dl-pct { font-size: 0.75rem; color: #7fdbff; font-weight: 600; white-space: nowrap; min-width: 32px; text-align: right; }
 .error-msg {
   color: #e74c3c; font-size: 0.8rem; margin-top: 0.3rem;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px;