制作css项目中基础圆形进度条-css教程-PHP中文网

制作css项目中基础圆形进度条

P粉602998670

发布： 2025-09-19 15:12:01

原创

1096人浏览过

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

制作css项目中基础圆形进度条

圆形进度条在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;
}

登录后复制

注意：