Implement enhanced loading progress display in DownloadManager and ImportManager. Introduce detailed progress updates and UI elements for current item and overall progress during downloads. Update LoadingManager to support dynamic progress visualization.

This commit is contained in:
Will Miao
2025-03-15 16:25:56 +08:00
parent 9a1fe19cc8
commit 9f2289329c
4 changed files with 224 additions and 20 deletions

View File

@@ -56,6 +56,53 @@
transition: width 200ms ease-out;
}
/* Enhanced progress display */
.progress-details-container {
margin-top: var(--space-3);
width: 100%;
text-align: left;
}
.overall-progress-label {
font-size: 0.9rem;
margin-bottom: var(--space-1);
color: var(--text-color);
}
.current-item-progress {
margin-top: var(--space-2);
}
.current-item-label {
font-size: 0.9rem;
margin-bottom: var(--space-1);
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.current-item-bar-container {
height: 8px;
background-color: var(--lora-border);
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--space-1);
}
.current-item-bar {
height: 100%;
background-color: var(--lora-accent);
transition: width 200ms ease-out;
width: 0%;
}
.current-item-percent {
font-size: 0.8rem;
color: var(--text-color-secondary, var(--text-color));
opacity: 0.7;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
@@ -63,7 +110,8 @@
@media (prefers-reduced-motion: reduce) {
.lora-card,
.progress-bar {
.progress-bar,
.current-item-bar {
transition: none;
}
}