怎样用CSS让圆环进度条按百分比动态平滑加载？-css教程-PHP中文网

conic-gradient配合CSS自定义属性是最简可控的环形进度条方案，三行CSS实现动态响应、平滑动画，现代浏览器全支持；SVG方案存在stroke-dasharray/dashoffset硬伤、IE11兼容问题及旋转起点反直觉等缺陷。

怎样用css让圆环进度条按百分比动态平滑加载？

直接用 conic-gradient 配合 CSS 自定义属性是最简、最可控的方案，无需 SVG、不操心周长计算、动画天然平滑，现代浏览器（Chrome 85+、Firefox 69+、Safari 15.4+）全支持。

为什么不用 stroke-dasharray + stroke-dashoffset？

这套 SVG 方案原理清晰，但实操中容易卡在几个硬伤上：

stroke-dasharray 必须显式声明为具体数值（如 "283 283"），不能靠继承或默认值，否则 transition 失效
stroke-dashoffset 起始值必须是数字（如 283），写成 inherit 或未设初值会导致首次动画跳变
IE11 完全不认 CSS 变量和 transition 在 SVG 属性上的作用，兜底成本高（得切到 setAttribute + requestAnimationFrame）
旋转起点要手动 transform: rotate(-90deg)，否则 0% 从 3 点钟方向开始，不符合直觉

conic-gradient 实现的关键三步

核心就三行 CSS，全部可动态响应：

HTML 里一个即可，无需嵌套伪元素或 SVG
CSS 中设固定尺寸 + border-radius: 50%，并用 background 直接画环：background: conic-gradient(#4a90e2 0deg, #4a90e2 calc(var(--p, 0) * 3.6deg), #e0e0e0 calc(var(--p, 0) * 3.6deg));
加 transition: background 0.4s ease-out; —— 注意不是 transition: --p，因为 conic-gradient 内部计算会自动触发重绘

JS 更新时只需：el.style.setProperty('--p', 75);，75 就代表 75%，3.6 是 360 / 100 的换算系数。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

兼容性 fallback 怎么做？

如果项目仍需支持 Safari 14 或旧版 Edge，别写双重实现，用 @supports 检测更干净：

/* 默认降级为 SVG 方案 */
.progress-ring {
  background: none;
}
@supports (background: conic-gradient(red, blue)) {
  .progress-ring {
    background: conic-gradient(#4a90e2 0deg, #4a90e2 calc(var(--p, 0) * 3.6deg), #e0e0e0 calc(var(--p, 0) * 3.6deg));
    transition: background 0.4s ease-out;
  }
}

注意：不要在 @supports 里写 transition: --p，它不会触发重绘；也不要对 --p 做 transition，浏览器不插值自定义属性本身，只插值它参与计算出的最终样式值。

真正容易被忽略的是：百分比值必须严格限制在 0–100 范围内。传入 105 或 -5，calc() 会产出非法角度，导致整个背景失效——JS 端务必做校验，而不是依赖 CSS 截断。