使用conic-gradient制作环形进度条的核心是利用其角度颜色过渡特性，通过css变量控制进度；2. html只需一个div并设置–percentage变量，css使用conic-gradient从0度开始按百分比填充颜色，再用::before伪元素创建中间圆孔，::after显示文本；3. 动态效果通过javascript修改–percentage实现，结合transition可让进度变化平滑动画；4. 浏览器兼容性方面，现代主流浏览器均支持，旧版浏览器可通过特性检测fallback到svg或多层div方案。该方法以极简代码实现高效、可维护的环形进度条，是当前最优解。
使用CSS制作环形进度条，特别是借助
conic-gradient
这个特性，现在变得出乎意料的简单和优雅。它让原本需要复杂SVG或多层HTML元素才能实现的效果，在一行CSS里就能搞定。核心思想就是利用
conic-gradient
从中心点向外辐射的特性，通过设定颜色和角度来模拟进度条的填充过程。
解决方案
要用
conic-gradient
制作一个环形进度条，我们主要利用它根据角度进行颜色过渡的能力。
首先，你需要一个HTML元素作为进度条的容器，比如一个简单的
div
：
立即学习“前端免费学习笔记（深入）”；
这里我直接在
style
属性里定义了一个CSS变量
--percentage
，这样方便通过JavaScript动态修改。
接着，是关键的CSS部分。
.progress-circle { --track-color: #e0e0e0; /* 进度条未填充部分的颜色 */ --progress-color: #4CAF50; /* 进度条已填充部分的颜色 */ --circle-size: 150px; /* 进度条的整体大小 */ --inner-hole-size: 120px; /* 中间圆孔的大小 */ width: var(--circle-size); height: var(--circle-size); border-radius: 50%; /* 确保是圆形 */ position: relative; /* 为伪元素定位做准备 */ display: grid; /* 方便居中内部文本或内容 */ place-items: center; /* 居中内容 */ overflow: hidden; /* 防止渐变超出边界，虽然conic-gradient通常不会 */ /* 核心：conic-gradient */ background: conic-gradient( var(--progress-color) calc(var(--percentage, 0) * 1%), /* 从0度开始，填充到指定百分比 */ var(--track-color) 0% /* 未填充部分，从百分比结束处开始填充剩余部分 */ );}/* 创建中间的圆孔 */.progress-circle::before { content: ''; position: absolute; width: var(--inner-hole-size); height: var(--inner-hole-size); border-radius: 50%; background-color: white; /* 圆孔的颜色，通常与背景色一致 */ /* 伪元素会自动被place-items居中，如果父元素是grid/flex */ /* 如果不是，则需要手动居中：top: 50%; left: 50%; transform: translate(-50%, -50%); */}/* 可选：显示百分比文本 */.progress-circle::after { content: var(--percentage, 0) '%'; /* 直接显示CSS变量的值 */ font-size: 1.5em; font-weight: bold; color: #333; z-index: 1; /* 确保文本在圆孔上方 */}
这段CSS的核心在于
background: conic-gradient(...)
。它从0度（默认是顶部中心）开始，
var(--progress-color) calc(var(--percentage, 0) * 1%)
表示用
--progress-color
填充到
--percentage
所代表的角度（例如75%就是270度）。接着，
var(--track-color) 0%
则表示从前一个颜色停止的地方（也就是
--percentage
的角度）开始，用
--track-color
填充剩余的部分。
至于中间的圆孔，我选择用一个
::before
伪元素来覆盖中心区域，并设置其背景色为白色（或你页面背景色），从而形成一个“挖空”的效果。
::after
伪元素则用来显示当前的百分比文本。
为什么
conic-gradient
是制作环形进度条的优选方案？
回想一下，在
conic-gradient
出现之前，制作一个漂亮的环形进度条简直是前端开发者的一个“小噩梦”。我记得那时候，常见的方案无非是几种：
多层
div
旋转法：这玩意儿需要至少两个
div
，一个负责左半边，一个负责右半边，通过
overflow: hidden
和
transform: rotate
来模拟进度。代码又臭又长，逻辑也比较绕，维护起来头大。特别是当进度超过50%时，还需要额外的处理。SVG法：使用SVG的
元素，通过
stroke-dasharray
和
stroke-dashoffset
来控制描边的长度。这个方法很强大，能实现很多复杂的效果，但缺点是需要引入SVG标记，对于纯CSS的组件来说，稍微有点“重”，而且对于不熟悉SVG的开发者来说，上手成本略高。Canvas法：完全通过JavaScript在Canvas上绘制。性能不错，但意味着你需要写更多的JS代码来管理绘制逻辑，而且每次更新都需要重新绘制，对于简单的进度条来说，有点杀鸡用牛刀。
而
conic-gradient
的出现，简直是降维打击。它将所有这些复杂性封装在一个CSS属性里。
极简代码：一个
div
，几行CSS，搞定。这大大减少了HTML标记和CSS代码量，让项目变得更轻量、更易读。纯CSS实现：这意味着它渲染效率高，性能好，不需要额外的JavaScript（除非你想做动画或动态更新）。易于定制：通过CSS变量，你可以轻松地修改颜色、大小、圆孔直径，甚至动态改变进度值，而无需触碰任何JavaScript或复杂的DOM操作。语义化更好：我们只是在描述一个元素的背景样式，而不是为了实现视觉效果而创造复杂的DOM结构。这符合CSS的初衷。
所以，对我来说，
conic-gradient
不仅仅是一个新的CSS属性，它代表了一种更优雅、更现代的Web开发思维：用最简洁的方式，实现最强大的效果。
如何为
conic-gradient
环形进度条添加动态效果与交互？
虽然
conic-gradient
本身是静态的，但结合CSS变量和JavaScript，我们可以让它“活”起来，实现动态更新和动画效果。
最直接的方式就是通过JavaScript来修改我们之前定义的
--percentage
这个CSS变量。
LibLibAI
国内领先的AI创意平台，以海量模型、低门槛操作与“创作-分享-商业化”生态，让小白与专业创作者都能高效实现图文乃至视频创意表达。
159 查看详情
// 假设你有一个进度条元素const progressBar = document.querySelector('.progress-circle');// 更新进度条的函数function updateProgress(percentage) { if (progressBar) { progressBar.style.setProperty('--percentage', percentage); }}// 示例：每秒更新一次进度let currentPercentage = 0;const intervalId = setInterval(() => { currentPercentage += 1; if (currentPercentage > 100) { currentPercentage = 0; // 循环 } updateProgress(currentPercentage); // 如果需要停止，可以调用 clearInterval(intervalId);}, 50); // 每50毫秒更新1%// 也可以通过用户交互来更新，比如点击按钮// document.getElementById('myButton').addEventListener('click', () => {// updateProgress(Math.floor(Math.random() * 101)); // 随机更新一个进度// });
通过
element.style.setProperty('--variableName', value)
，我们可以实时地改变CSS变量的值，
conic-gradient
会立即响应并重新渲染。
添加动画效果：
如果你想让进度条的更新过程更平滑，而不是瞬间跳变，可以尝试使用CSS
transition
。
.progress-circle { /* ... 其他样式 ... */ transition: --percentage 0.5s ease-out; /* 让 --percentage 的变化有动画效果 */}
这里有一个小技巧：
transition
属性可以直接作用于CSS自定义属性（即CSS变量），这在现代浏览器中支持得很好。当
--percentage
的值发生变化时，它会在0.5秒内平滑过渡，看起来就像进度条在“生长”一样。
对于更复杂的动画，比如需要多个步骤或更精细的控制，你也可以考虑使用JavaScript动画库（如GSAP）来插值
--percentage
的值，或者利用
@keyframes
来定义更复杂的动画序列，尽管直接在
conic-gradient
上应用
@keyframes
可能不如直接修改
--percentage
变量来得灵活。但对我个人而言，对于这种简单的进度条动画，一个简单的
transition
通常就足够了，它既简单又高效。
conic-gradient
的浏览器兼容性与备选方案有哪些？
尽管
conic-gradient
在现代Web开发中表现出色，但了解其浏览器兼容性以及可能的备选方案仍然很重要，尤其是在需要支持旧版浏览器或追求极致兼容性的项目中。
浏览器兼容性：
目前，
conic-gradient
在主流的现代浏览器中支持度已经非常好了。包括：
Chrome: 从版本69开始支持。Firefox: 从版本83开始支持。Edge: 从版本79（基于Chromium）开始支持。Safari: 从版本12.1开始支持（需要
-webkit-
前缀，但在最新版本中通常不再需要）。
你可以随时访问
caniuse.com
，搜索
conic-gradient
来获取最详细和最新的兼容性信息。总的来说，如果你主要面向的是近几年的桌面和移动浏览器用户，那么
conic-gradient
的使用基本没有问题。
备选方案（Fallbacks）：
对于那些不支持
conic-gradient
的浏览器（主要是IE，以及一些非常旧版本的浏览器），你的进度条可能不会按预期显示。这时，我们可以考虑以下几种策略：
渐进增强（Progressive Enhancement）：这是我个人比较倾向的做法。对于不支持的浏览器，进度条可能只会显示一个纯色背景（如果你在
conic-gradient
之前定义了
background-color
）或者干脆不显示进度效果。如果这个组件并非核心功能，这种“优雅降级”是可以接受的。用户仍然能看到页面内容，只是视觉效果有所缺失。
SVG作为备选：如果视觉效果至关重要，那么SVG是一个非常强大的备用方案。你可以使用JavaScript来检测浏览器是否支持
conic-gradient
。如果不支持，则动态地插入或切换到使用SVG
和
stroke-dasharray
实现的进度条。这种方法需要更多的JavaScript代码来管理，但能确保在所有浏览器中都提供一致的视觉体验。
// 简单的 conic-gradient 支持检测function supportsConicGradient() { const el = document.createElement('div'); el.style.backgroundImage = 'conic-gradient(white, black)'; return el.style.backgroundImage.includes('conic-gradient');}if (!supportsConicGradient()) { // Fallback to SVG or other methods // 例如，为 .progress-circle 添加一个特定的 class，然后用 CSS 切换显示 document.querySelector('.progress-circle').classList.add('no-conic-gradient'); // 或者直接替换 HTML 内容为 SVG 进度条}
旧版CSS方法：虽然复杂，但基于
border-radius
、
overflow: hidden
和
transform: rotate
的多
div
方案是纯CSS的，可以作为最后的纯CSS备选。但这通常意味着代码量和复杂性会显著增加，所以我个人很少会推荐它作为首选的备选方案。
在实际项目中，我通常会先评估目标用户群体的浏览器分布。如果大部分用户都使用现代浏览器，那么我可能会选择渐进增强，让不支持的浏览器看到一个基本版本。如果项目对兼容性要求极高，那么我会倾向于使用JavaScript进行特性检测，并提供SVG作为备用方案。毕竟，CSS的进步是为了让我们写更少的代码，实现更好的效果，没必要为了极少数的旧浏览器而牺牲代码的简洁性。
以上就是CSS怎样制作环形进度条？conic-gradient技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1086981.html
微信扫一扫 
支付宝扫一扫 
