CSS怎样制作环形进度条？conic-gradient应用-css教程-PHP中文网

使用conic-gradient制作环形进度条的核心是利用其角度渐变特性模拟扇形填充，并通过伪元素创建中心遮罩实现环形镂空效果；2. 首先设置一个圆形容器，使用::before伪元素应用conic-gradient，根据css变量--progress-percent定义进度颜色的终止角度，剩余部分由轨道颜色填充；3. 使用::after伪元素创建一个较小的同心圆，尺寸为容器尺寸减去两倍的进度条厚度，背景色与中心区域一致，通过z-index覆盖在渐变上方，形成视觉上的“镂空”环形；4. 动态更新进度通过javascript修改--progress-percent变量实现，如document.queryselector('.circular-progress').style.setproperty('--progress-percent', '75')；5. 实现动画效果可采用@property定义可动画的css变量并结合transition，或使用javascript的requestanimationframe逐步更新变量值以实现平滑过渡；6. 相比传统方法如多元素旋转、svg路径或border技巧，conic-gradient方案代码更简洁、维护更方便，且能精准控制角度渐变，是目前最直观高效的环形进度条实现方式，最终效果完整且可高度自定义。

CSS怎样制作环形进度条？conic-gradient应用

CSS制作环形进度条，尤其是结合

conic-gradient

登录后复制

，核心在于利用它独特的角度渐变特性来模拟扇形填充。简单来说，就是用一个圆锥渐变来表示进度，再通过一个内部的圆来“挖空”中心，形成环形效果。这种方法比以前的多种元素叠加或者复杂的SVG路径要直观和优雅得多。

解决方案

要使用

conic-gradient

登录后复制

制作一个环形进度条，我们需要一个容器元素，并利用其伪元素来绘制渐变和中心遮罩。

首先，我们设定一个HTML结构：

立即学习“前端免费学习笔记（深入）”；

<div class="circular-progress">
    <span class="progress-value">50%</span>
</div>

登录后复制

接着，是关键的CSS部分：

.circular-progress {
    position: relative;
    width: 180px; /* 进度条外径 */
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 防止渐变超出边界 */

    /* CSS变量，方便控制 */
    --progress-percent: 50; /* 0-100的百分比值 */
    --progress-color: #4CAF50; /* 进度条颜色 */
    --track-color: #e0e0e0; /* 轨道背景色 */
    --inner-circle-bg: #ffffff; /* 中心圆背景色 */
    --bar-thickness: 15px; /* 进度条厚度 */
}

.circular-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* 使用 conic-gradient 创建进度和轨道 */
    background: conic-gradient(
        var(--progress-color) calc(var(--progress-percent) * 1%), /* 进度部分 */
        var(--track-color) 0% /* 剩余轨道部分 */
    );
    z-index: 1; /* 确保在中心圆下方 */
}

.circular-progress::after {
    content: '';
    position: absolute;
    /* 创建一个比父元素小的圆，作为中心遮罩 */
    width: calc(100% - (var(--bar-thickness) * 2));
    height: calc(100% - (var(--bar-thickness) * 2));
    border-radius: 50%;
    background-color: var(--inner-circle-bg);
    z-index: 2; /* 确保在进度条上方 */
}

.progress-value {
    position: relative; /* 确保文本在最上层 */
    z-index: 3;
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

登录后复制

通过调整

--progress-percent

登录后复制

这个CSS变量，你就可以动态地改变进度条的填充量。例如，使用JavaScript可以这样更新：

document.querySelector('.circular-progress').style.setProperty('--progress-percent', '75');

登录后复制

。

为什么

conic-gradient

登录后复制

是制作环形进度条的理想选择？

我觉得，

conic-gradient

登录后复制

简直是为这类需求而生的，它直接模拟了扇形填充，比以前那些奇技淫巧舒服太多了。在

conic-gradient

登录后复制

出现之前，我们制作环形进度条往往需要借助复杂的技巧，比如：

多层元素叠加与旋转： 使用两个半圆或多个矩形，通过
```
transform: rotate()
```
登录后复制
来模拟进度，这种方法代码量大，维护复杂，而且在动画效果上容易出现跳动。
SVG路径动画： 虽然SVG是矢量图形的利器，也能完美实现环形进度条，但对于纯CSS项目来说，引入SVG意味着需要额外学习和处理XML结构，增加了项目的复杂度。
border
登录后复制
或
box-shadow
登录后复制
技巧：有些方法会利用
```
border
```
登录后复制
的圆角和颜色来模拟，但通常只能实现简单的效果，对于渐变色或更复杂的进度显示则无能为力。

conic-gradient

登录后复制

的出现彻底改变了这一局面。它的工作原理是基于中心点，沿着圆周方向进行颜色渐变。你可以精确地控制每个颜色在圆周上的起始和结束角度。这意味着，我们只需要指定一个颜色从0度开始，到某个百分比角度结束，然后用另一种颜色填充剩余部分，一个完美的扇形进度就自然形成了。这种直观的控制方式，让开发者能够以更少的代码实现更精确、更灵活的环形进度条，大大提升了开发效率和可维护性。我个人觉得，它简直是前端工程师的福音。

环形进度条的“镂空”效果是如何实现的？

说实话，第一次用

conic-gradient

登录后复制

的时候，我脑子里想的还是怎么用

border-radius

登录后复制

加

overflow: hidden

登录后复制

来切圆，但很快就发现，要实现环形进度条中间的“镂空”效果，最常用的且最优雅的方法是利用伪元素（

::after

登录后复制

或

::before

登录后复制

）在

conic-gradient

登录后复制

之上再覆盖一个颜色相同的圆。

具体来说，我们的

conic-gradient

登录后复制

伪元素（通常是

::before

登录后复制

）会绘制一个完整的圆形进度条，它填充了整个容器。为了让它看起来像一个“环”，我们需要在它的正上方再放置一个略小一点的圆形元素。这个小圆的背景色通常设置为与页面背景色或进度条中心区域的预期背景色一致，从而“遮盖”住

conic-gradient

登录后复制

的中心部分，只留下外围的环形区域。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

实现这个“镂空”效果的关键在于：

尺寸计算： 内部遮罩圆的直径需要精确计算。如果你的进度条厚度是
```
--bar-thickness
```
登录后复制
，那么内部圆的直径就应该是外部容器直径减去两倍的
```
--bar-thickness
```
登录后复制
。这样，留下的环形区域的宽度正好就是
```
--bar-thickness
```
登录后复制
。
定位与层叠： 内部遮罩圆需要与外部进度条圆完全对齐，并且
```
z-index
```
登录后复制
要高于进度条伪元素，确保它能覆盖在上面。我们通常会使用
```
position: absolute; top: 0; left: 0;
```
登录后复制
配合
```
width: 100%; height: 100%;
```
登录后复制
（对于外层伪元素）以及计算后的
```
width
```
登录后复制
和
```
height
```
登录后复制
（对于内层遮罩伪元素），再结合
```
display: flex; align-items: center; justify-content: center;
```
登录后复制
来确保内容居中。
背景色： 内部遮罩圆的
```
background-color
```
登录后复制
至关重要，它决定了镂空部分的颜色。通常设置为白色或其他纯色，与设计背景相符。

这种方法既简单又高效，完美地利用了CSS的层叠特性来达到视觉上的“镂空”效果，而实际上并没有真的“挖”掉什么。

环形进度条的动画效果和动态更新如何实现？

让环形进度条动起来或者根据数据实时更新，是提升用户体验的关键。实现这些效果主要依赖于CSS的

transition

登录后复制

属性和JavaScript对CSS变量的操纵。

动态更新： 最直接的方式就是通过JavaScript来修改我们之前定义的CSS自定义属性（变量），例如
```
--progress-percent
```
登录后复制
。当这个变量的值改变时，
```
conic-gradient
```
登录后复制
会立即根据新的百分比重新渲染。
```
// 假设你想将进度更新到75%
const progressBar = document.querySelector('.circular-progress');
progressBar.style.setProperty('--progress-percent', '75');
```
登录后复制
这种方式非常灵活，JavaScript只需要关注数据的变化，而CSS负责渲染，职责分离清晰。
动画效果： 虽然
```
conic-gradient
```
登录后复制
本身并不能直接通过
```
transition
```
登录后复制
平滑过渡，因为
```
background
```
登录后复制
属性的渐变值变化不属于可动画的范畴。但我们可以巧妙地利用
```
transition
```
登录后复制
来动画化控制
```
conic-gradient
```
登录后复制
的CSS变量。
- 平滑过渡： 在
```
.circular-progress
```
  登录后复制
  容器上添加
```
transition
```
  登录后复制
  属性，针对
```
background
```
  登录后复制
  或
```
background-image
```
  登录后复制
  （如果你的
```
conic-gradient
```
  登录后复制
  是直接设置在
```
background
```
  登录后复制
  上的）或者更精确地，针对影响渐变的CSS变量（虽然直接动画CSS变量需要一些技巧，但通过
```
transition
```
  登录后复制
  作用于父元素的
```
background
```
  登录后复制
  属性，当伪元素的
```
background
```
  登录后复制
  因变量变化而改变时，浏览器会尝试平滑过渡）。
```
.circular-progress::before {
    /* ...其他样式... */
    transition: background 0.5s ease-in-out; /* 尝试动画化背景 */
}
```
  登录后复制
  实际测试中，直接
```
transition
```
  登录后复制
```
background
```
  登录后复制
  在
```
conic-gradient
```
  登录后复制
  上可能效果不佳或不被支持。更可靠的做法是：
  - 使用
```
@property
```
    登录后复制
    (CSS Houdini): 如果浏览器支持
```
@property
```
    登录后复制
    ，你可以注册
```
--progress-percent
```
    登录后复制
    为一个可动画的属性，这样就能直接对它进行
```
transition
```
    登录后复制
    或
```
animation
```
    登录后复制
    。
```
@property --progress-percent {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.circular-progress::before {
    /* ...其他样式... */
    transition: --progress-percent 0.5s ease-in-out;
}
```
    登录后复制
    然后JavaScript更新变量时就会有动画了。这是目前最理想的纯CSS动画方案。
  - JavaScript驱动动画： 如果不考虑
```
@property
```
    登录后复制
    的兼容性，或者需要更复杂的动画曲线，那么JavaScript驱动的动画（例如使用
```
requestAnimationFrame
```
    登录后复制
    ）仍然是强大的选择。你可以逐步增加或减少
```
--progress-percent
```
    登录后复制
    的值，每一步都更新CSS变量，从而模拟出平滑的动画效果。
```
function animateProgress(start, end, duration) {
    let startTime = null;
    const progressElement = document.querySelector('.circular-progress');

    function step(currentTime) {
        if (!startTime) startTime = currentTime;
        const progress = Math.min((currentTime - startTime) / duration, 1);
        const currentValue = start + (end - start) * progress;
        progressElement.style.setProperty('--progress-percent', currentValue);

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

// 调用动画：从当前值动画到75%，持续1秒
// animateProgress(parseInt(progressBar.style.getPropertyValue('--progress-percent')), 75, 1000);
```
    登录后复制
    我个人更倾向于优先考虑CSS方案，因为它可以将动画的性能优化交给浏览器，但如果CSS无法满足，JS动画也是非常可靠的兜底方案。CSS这东西，有时候就是这样，一个新属性就能彻底改变你的思路。