如何使用CSS制作简单圆形进度条_border-radius与stroke结合

P粉602998670 2025-11-25 00:00:00 次阅读

使用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 结构示例：

说明：

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%