CSS环形进度条制作方法

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS环形进度条制作教程》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

使用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，核心在于利用它独特的角度渐变特性来模拟扇形填充。简单来说，就是用一个圆锥渐变来表示进度，再通过一个内部的圆来“挖空”中心，形成环形效果。这种方法比以前的多种元素叠加或者复杂的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的中心部分，只留下外围的环形区域。

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

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

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

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

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

1. 动态更新： 最直接的方式就是通过JavaScript来修改我们之前定义的CSS自定义属性（变量），例如--progress-percent。当这个变量的值改变时，conic-gradient会立即根据新的百分比重新渲染。

   // 假设你想将进度更新到75%
   const progressBar = document.querySelector('.circular-progress');
   progressBar.style.setProperty('--progress-percent', '75');

   这种方式非常灵活，JavaScript只需要关注数据的变化，而CSS负责渲染，职责分离清晰。

2. 动画效果： 虽然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这东西，有时候就是这样，一个新属性就能彻底改变你的思路。

今天关于《CSS环形进度条制作方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于动画,伪元素,CSS变量,环形进度条,conic-gradient的内容请关注golang学习网公众号！