alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add mini progress circle to progress panel when collapsed

Browse Source
This commit is contained in:
Will Miao
2025-04-30 15:18:18 +08:00
parent 61f723a1f5
commit e1efff19f0
3 changed files with 169 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/components/progress-panel.css
View File

@@ -25,6 +25,7 @@
.progress-panel.collapsed .progress-panel-header {
border-bottom: none;
padding-bottom: calc(var(--space-2) + 12px);
}
.progress-panel-header {
@@ -61,6 +62,7 @@
justify-content: center;
opacity: 0.6;
transition: all 0.2s;
position: relative;
}
.icon-button:hover {
@@ -165,4 +167,49 @@
.hidden {
display: none !important;
}
/* Mini progress indicator on pause button when panel collapsed */
.mini-progress-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
opacity: 0; /* Hide by default */
transition: opacity 0.2s ease;
}
/* Show mini progress when panel is collapsed */
.progress-panel.collapsed .mini-progress-container {
opacity: 1;
}
.mini-progress-circle {
stroke: var(--lora-accent);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 0.3s ease;
}
.mini-progress-background {
stroke: var(--lora-border);
fill: none;
stroke-width: 2;
}
.progress-percent {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 0.65em;
color: var(--text-color);
opacity: 0.8;
white-space: nowrap;
}