DATA VISUALIZATION
进度环Progress Ring
一圈从 0° 画到当前百分比的圆环，中心数字同步——比横条进度更紧凑。
效果预览
73%
本季目标已达成 ¥365k / ¥500k还差 ¥135k，进度正常
适合用在哪
任务完成度、存储用量、目标达成率、学习进度。
容易踩的坑
- SVG 进度环缺少 role="progressbar" 和 aria-valuenow，读屏无法得知完成度。
- 中心数字计数与弧动画分别计时，低端设备上两者不同步，出现数字先到弧后到。
- 完成庆祝每次进入页面都触发，已达成的环反复弹对勾显得廉价。
设计提示词 · Prompt
进度环（Progress Ring）：SVG circle，r=33、周长≈207，用 stroke-dasharray:207 + stroke-dashoffset(207→207×(1-p)) 画弧；SVG 旋转 -90° 让起点在 12 点方向。线宽 7-9px、stroke-linecap:round、颜色用渐变（SVG linearGradient）。中心百分比数字与弧动画同步（JS 计数）。多个进度环并排时尺寸与线宽必须一致。完成 100% 时加一个对勾弹入或整环发光的庆祝反馈。小于 10% 时弧太短圆头帽会溢出，改用方头（butt）。
Progress Ring: an SVG circle, r=33, circumference ≈207, drawing the arc with stroke-dasharray:207 + stroke-dashoffset (207→207×(1-p)); rotate the SVG -90° so it starts at 12 o'clock. Stroke width 7-9px, stroke-linecap:round, colored with a gradient (SVG linearGradient). The center percentage number stays in sync with the arc animation (JS counting). When several rings sit side by side, size and stroke width must be identical. At 100% completion add a celebratory checkmark pop-in or a full-ring glow. Below 10% the arc is so short the round caps overflow — switch to butt caps.
常见搭配
同一页面里经常和「进度环」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-ringwrap">
<div class="d-ring">
<svg viewBox="0 0 74 74" width="74" height="74">
<defs><linearGradient id="d-ring-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4f46e5"/><stop offset="1" stop-color="#c026d3"/>
</linearGradient></defs>
<circle class="d-ring__track" cx="37" cy="37" r="33" fill="none" stroke-width="8"/>
<circle class="d-ring__fill" cx="37" cy="37" r="33" fill="none" stroke-width="8" stroke-dasharray="207" stroke-dashoffset="56"/>
</svg>
<span class="d-ring__num">73%</span>
</div>
<div class="d-ring__info"><b>本季目标</b><span>已达成 ¥365k / ¥500k</span><span>还差 ¥135k，进度正常</span></div>
</div>