使用SVG的stroke-dasharray和stroke-dashoffset实现动态圆形进度条，配合transform控制起始角度，结合border-radius做静态装饰，通过JavaScript动态计算偏移值实现进度动画。
要制作一个简单的圆形进度条，可以结合使用CSS的 border-radius 和 SVG 的 stroke 属性。虽然 border-radius 通常用于创建圆角或圆形元素，但实现真正可动的进度效果更推荐使用 SVG 配合 stroke-dasharray 和 stroke-dashoffset 来控制描边长度，从而形成动态进度。
1. 使用 border-radius 制作静态圆形容器
你可以用纯 CSS 创建一个圆形背景，作为进度条的外框：
.circular-progress {
width: 100px;
height: 100px;
background: #e0e0e0;
border-radius: 50%;
position: relative;
}
这个方法能做出一个圆形外观，但无法精确表示“进度”动画，适合做静态装饰。
2. 使用 SVG + stroke 实现动态圆形进度条
更实用的方法是使用 SVG 绘制一个圆形路径，并通过修改描边来展示进度。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50" fill="none" stroke="#e6e6e6" stroke-width="10"/>
<circle cx="60" cy="60" r="50" fill="none" stroke="#4caf50"
stroke-width="10"
stroke-dasharray="314"
stroke-dashoffset="94.2"
transform="rotate(-90 60 60)" />
</svg>
说明：
- r="50"：半径为50，周长 = 2πr ≈ 314
- stroke-dasharray="314"：把描边切成等份，总长度等于周长
- stroke-dashoffset：控制虚线起点偏移。值越小，显示的弧越长
- 例如：70% 进度 → 偏移 = 314 × (1 - 0.7) = 94.2
- transform="rotate(-90 ...)"：让进度从顶部开始（默认从右侧开始）
3. 添加 CSS 动画
你可以通过 CSS 让进度条动起来：
circle:nth-child(2) {
transition: stroke-dashoffset 0.3s ease;
}
然后通过 JavaScript 或类名改变 stroke-dashoffset 的值，实现动态效果。
例如，用 JavaScript 控制：
function setProgress(percent) {
const offset = 314 * (1 - percent / 100);
document.querySelector('.progress-ring').style.strokeDashoffset = offset;
}
setProgress(70); // 设置为70%
4. 结合 border-radius 与 SVG 的优势
虽然 border-radius: 50% 可以做出圆形，但它不能像 SVG 那样精确控制描边进度。建议：
- 用 SVG + stroke 实现带进度动画的圆形条
- 用 border-radius 做容器或背景装饰
- 两者可结合使用，比如把 SVG 放在圆形卡片内
基本上就这些。核心是理解 stroke-dasharray 和 stroke-dashoffset 如何模拟进度变化，border-radius 更适合静态视觉造型。不复杂但容易忽略细节。
