CSS 如何实现环形进度条？

Question

CSS 如何实现环形进度条？

仓乃文 · Accepted Answer

环形进度条通过 SVG circle 元素的 stroke-dasharray 和 stroke-dashoffset 属性控制圆弧长度，实现百分比进度显示。 ```css .progress-ring { transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; } .progress-ring .bg { stroke: #e0e0e0; } .progress-ring .fill { stroke: #6c5ce7; stroke-dasharray: 283; stroke-dashoffset: calc(283 - 283 * var(--percent) / 100); transition: stroke-dashoffset 0.5s ease; } ``` HTML 结构： ```html ``` 补充说明： - 圆周长 = 2 × π × r，r=45 时周长 ≈ 283 - stroke-dasharray: 283 设置虚线总长度等于周长 - stroke-dashoffset 控制虚线偏移，值越大显示越少 - transform: rotate(-90deg) 让进度从 12 点钟方向开始 - 通过 CSS 变量 --percent 动态控制进度