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

使用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>

说明：

智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

85

查看详情

• 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 更适合静态视觉造型。不复杂但容易忽略细节。

以上就是如何使用CSS制作简单圆形进度条_border-radius与stroke结合的详细内容，更多请关注php中文网其它相关文章！