圆形进度条可用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方式最简洁，适合现代项目；老式旋转法兼容性好，适合需支持旧浏览器的场景。
