圆形进度条可用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
，可以轻松创建扇形颜色分布，模拟进度效果。
示例代码：
.circle-progress { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#4caf50 calc(var(–progress) * 1%), #f0f0f0 0); position: relative;}.circle-progress::after { content: ”; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: #fff; border-radius: 50%;}
说明：
立即学习“前端免费学习笔记（深入）”；
--progress
是自定义属性，控制进度百分比（如 60 表示 60%）背景使用
conic-gradient
从主色过渡到灰色底色::after 伪元素遮住中间，形成“环”状视觉
2. 使用伪元素旋转法（兼容性更好）
如果需要兼容不支持
conic-gradient
的浏览器，可以用两个半圆旋转的方式实现。
稿定抠图
AI自动消除图片背景
76 查看详情
.circle-progress-alt { width: 100px; height: 100px; border-radius: 50%; background: #f0f0f0; position: relative;}
.fill {position: absolute;width: 50%;height: 100%;top: 0;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);overflow: hidden;border-radius: 0 50px 50px 0;background-color: #4caf50;}
.half-left {left: 0;transform-origin: 100% 50%;animation: rotate-half 0s linear forwards;}
.half-right {right: 0;transform-origin: 0 50%;animation: rotate-half 0s linear forwards;}
/ 示例：75% 进度 /.circle-progress-alt[data-percent=”75″] .half-left {animation: rotate-half 0s 0.1ms steps(1) forwards;}
@keyframes rotate-half {0% { transform: rotate(0deg); }100% { transform: rotate(180deg); }}
/ 超过50%时，左半圆满，右半圆转角度 /.circle-progress-alt[data-percent=”75″] .half-right {animation: rotate-half 0s 0.1ms steps(1) forwards;transform: rotate(calc((var(–p) – 50) * 3.6deg));}
/ 动态计算 –p 变量 /[data-percent] {–p: attr(data-percent);}
实际使用中可通过JS动态设置
data-percent
，但纯CSS也可通过类名控制。
3. 添加文字显示进度
在中间加入文字，显示当前百分比。
70%
.text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #333;}
更新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项目中基础圆形进度条的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1068829.html
微信扫一扫 
支付宝扫一扫 
