CSS圆形进度条制作教程

本篇文章给大家分享《CSS基础圆形进度条制作教程》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

圆形进度条可用CSS实现，核心方法有二：1. 使用conic-gradient通过背景渐变和伪元素遮罩形成环形，结合CSS变量控制进度；2. 兼容性方案采用两个半圆旋转叠加，利用clip-path和transform模拟填充效果。两种方式均无需JavaScript即可静态展示进度，通过伪元素或子元素实现视觉层次。添加文字提示时，在容器中央放置文本并居中显示百分比。推荐封装为组件，使用CSS变量定义颜色、尺寸与进度，便于复用。现代项目首选conic-gradient法，简洁高效；老旧浏览器则用伪元素旋转方案确保兼容性。

圆形进度条在CSS项目中很常见，常用于加载提示、技能展示或数据可视化。实现一个基础的圆形进度条不需要JavaScript，仅用HTML和CSS就能完成，核心是利用border-radius和conic-gradient或伪元素配合旋转动画。

1. 使用 conic-gradient 实现简单圆形进度条

现代浏览器支持conic-gradient，可以轻松创建扇形颜色分布，模拟进度效果。

示例代码：

<div class="circle-progress" style="--progress: 60%;"></div>

说明：

• --progress 是自定义属性，控制进度百分比（如 60 表示 60%）
• 背景使用conic-gradient从主色过渡到灰色底色
• ::after 伪元素遮住中间，形成“环”状视觉

2. 使用伪元素旋转法（兼容性更好）

如果需要兼容不支持conic-gradient的浏览器，可以用两个半圆旋转的方式实现。

<div class="circle-progress-alt">
  <span class="fill half-left"></span>
  <span class="fill half-right"></span>
</div>

实际使用中可通过JS动态设置data-percent，但纯CSS也可通过类名控制。

3. 添加文字显示进度

在中间加入文字，显示当前百分比。

<div class="circle-progress" style="--progress: 70;">
  <span class="text">70%</span>
</div>

更新CSS：

.circle-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 calc(var(--progress) * 3.6deg), #f0f0f0 0);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

注意：calc(var(--progress) * 3.6deg) 将百分比转换为角度（100% → 360°）

4. 可复用的组件建议

将样式封装成可配置的类，方便在项目中多次使用。

• 使用CSS变量控制颜色、大小、进度
• 设置默认尺寸，通过class调整大小（如 .small, .large）
• 避免内联样式，推荐通过JS修改style.setProperty

基本上就这些。用conic-gradient方式最简洁，适合现代项目；老式旋转法兼容性好，适合需支持旧浏览器的场景。

终于介绍完啦！小伙伴们，这篇关于《CSS圆形进度条制作教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！