给反馈
进度环
Progress Ring
「圆圈进度」「转圈的百分比」「一圈慢慢满的环」「中间带数字的圆环」「圆环进度条」「描边的进度圈」「手表那种圆环」
LIVE DEMO真实可交互，动手试试
54%
- 英文名
- Progress Ring
- 别名 · 俗称
- 环形进度条圆形进度进度圆环svg: stroke-dashoffset
- Web 叫法
- Progress Ring（SVG stroke-dashoffset）
- 大白话定义
- 一个圆环慢慢描满，表示进度走到百分之几，常在中间配个数字。
- 部位拆解
- 轨道环 Track浅色底圈，表示总量
- 进度弧 Indicator有颜色的那段弧，随进度变长
- 中心文案 Label可选，放百分比数字
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
在上传区显示进度环（SVG stroke-dashoffset）：圆环随上传百分比描满，中心显示「68%」，完成后变对勾
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的进度环（CircularProgress）。逐一排除：stroke-dasharray 和圆周长算错，100% 时留一道缺口；起点不在 12 点方向或方向画反，进度从奇怪的位置起跑；百分比更新没加过渡动画，数字和圆环跳变不同步；深色模式下轨道环颜色太暗，底圈直接隐身。症状是：