temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g146): 进度条支持环形形态

Browse Source
This commit is contained in:
HIsheR
2026-10-26 15:43:31 +08:00
parent adc69fa880
commit 2adae6e29e
8 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+30
View File
@@ -4482,3 +4482,33 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
line-height: 14px;
white-space: nowrap;
}
/* —— 环形进度：SVG 双圆，弧长由 dashoffset 控制 —— */
.ua-progress-circle {
display: inline-flex;
}
.ua-progress-ring {
width: 64px;
height: 64px;
}
.ua-progress-ring-track {
stroke: color-mix(in srgb, var(--ua-color-border) 80%, transparent);
}
.ua-progress-ring-arc {
stroke: var(--ua-color-accent);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
}
.ua-progress-ring.is-success .ua-progress-ring-arc { stroke: var(--ua-color-success); }
.ua-progress-ring.is-warning .ua-progress-ring-arc { stroke: var(--ua-color-warning); }
.ua-progress-ring.is-danger .ua-progress-ring-arc { stroke: var(--ua-color-danger); }
.ua-progress-ring-text {
fill: var(--ua-color-text);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.ua-progress-ring-arc {
transition: none;
}
}