如何利用CSS制作环形进度条_通过conic-gradient角向渐变实现-css教程-PHP中文网

conic-gradient画环形进度条的核心原理是利用角向渐变绕圆心顺时针着色，配合clip-path裁剪实现进度控制；需双层结构（底层色盘+上层遮罩）、rotate(-90deg)对齐顶部起点，并通过CSS变量--p动态控制露出角度。

如何利用css制作环形进度条_通过conic-gradient角向渐变实现

角向渐变不是从中心向外辐射，而是绕圆心顺时针旋转着色——这正好匹配“进度从 0° 转到 N°”的视觉需求。关键在于：用 conic-gradient 生成一个满圆色盘，再用 clip-path 或遮罩层裁出“未完成部分”，只露出已转过的扇形区域。

常见错误是直接写 conic-gradient(red 0%, blue 50%, green 100%) 就以为能当进度条用——其实它默认画满整个圆，没有“只画 30%”的语义，必须配合裁剪或叠加技巧才能体现进度值。

不用 SVG、不依赖 JS，纯 CSS 实现的关键是两层 DOM：底层是固定色盘（conic-gradient），上层是白色圆形遮罩（带 clip-path: inset() 动态裁剪缺口）。通过控制上层的裁剪尺寸，让底层色盘“漏出”的角度对应进度。

实操建议：

外容器设为正方形，aspect-ratio: 1 或固定宽高，避免椭圆变形
底层用 background: conic-gradient(#4a90e2 0deg, #4a90e2 calc(360 * var(--p, 0.7))deg, #e0e0e0 0)，注意第二个色标用 deg 单位，且要写 0deg 显式起始
上层遮罩用 clip-path: inset(0 round 50%) 保证边缘圆润；裁剪缺口大小由 --p 控制，例如 inset(calc(50% - 50% * var(--p)) round 50%)
务必加 transform: rotate(-90deg) 到底层，让 0% 从顶部开始，符合直觉

conic-gradient 在 Safari 15.4+、Chrome 69+、Firefox 83+ 支持良好，但旧版 Safari（iOS 15.2 及更早）会回退为 linear-gradient 或全白。不能指望它降级后还能“看起来像进度条”。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

稳妥做法：

用 @supports (background: conic-gradient(red, blue)) 包裹核心样式，内部写现代实现
外部写基础 fallback：比如用 border: 10px solid #e0e0e0 + border-top-color: #4a90e2 模拟 25% 进度（靠 animation: spin 1s linear infinite 旋转），虽不精确但至少有环形感
避免在 conic-gradient 中混用透明色（如 transparent），某些安卓 WebView 渲染异常

直接改 CSS 变量 --p 是最轻量的方式，但要注意：CSS 自定义属性本身不触发重排，仅重绘，所以性能好；但若通过 JS 批量修改（如每 10ms 更新一次），仍可能因频繁重绘影响低端设备。

实操建议：

JS 中用 element.style.setProperty('--p', progress / 100)，progress 是 0–100 的整数
不要在 conic-gradient 中写表达式如 calc(var(--p) * 360deg) —— 部分浏览器解析失败，应提前算好传入
若需动画效果，给 background 加 transition: background 0.3s ease-out，但注意 Safari 对 conic-gradient 的 transition 支持不稳定，可改用 transform: rotate() 配合遮罩层动画作为替代路径

真正难的是让环形进度条在缩放、高 DPI、暗色模式下都保持清晰和语义一致——这些细节往往比画出第一个圆环更耗时间。