iter(g284): 新增 progressRing 环形进度组件

2026-10-26 23:12:33 +08:00
parent f20f673e76
commit c4384be959
12 changed files with 239 additions and 11 deletions
@@ -5872,6 +5872,35 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
  word-break: break-word;
 }

+/* ---- 环形进度：底环走描边色，进度弧跟随 currentColor，中心文字用等宽数字 ---- */
+.ua-ring {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ua-color-accent); /* 弧色跟随文字色：父级改 color 即可换色，不引入第二个色源 */
+}
+
+.ua-ring svg {
+  display: block;
+}
+
+.ua-ring-track {
+  stroke: var(--ua-color-border);
+}
+
+.ua-ring-arc {
+  stroke: currentColor;
+  transition: stroke-dasharray var(--ua-duration-slower) var(--ua-ease); /* 只动 dasharray：不产生空间位移，减少动效规则下无副作用 */
+}
+
+.ua-ring-text {
+  position: absolute;
+  color: var(--ua-color-text);
+  font-size: var(--ua-font-size-sm);
+  font-variant-numeric: tabular-nums; /* 等宽数字：进度跳到 100% 时文字不会左右晃 */
+}
+
 /* ---- 减少动效：旋转 / 缩放一律退化为瞬时 ----
   前两类（无限动画、悬停位移）已有专门兜底，但 rotate / scale 过渡属于第三类空间动效：
   折叠箭头旋转、卡片按压缩放都靠它提供手感。减少动效下把过渡属性收窄成「只留颜色类」，