如何利用CSS变量实现进度条的动态百分比显示？-css教程-PHP中文网

用--progress变量控制进度条宽度需通过width: var(--progress, 0%)绑定，js调用style.setproperty('--progress', '65%')更新值，配合transition: width 0.3s ease实现动画；变量本身不触发重绘，必须驱动可动画的width属性，且避免calc对百分比变量运算。

如何利用css变量实现进度条的动态百分比显示？

怎么用 `--progress` 变量控制进度条宽度？

CSS 变量本身不能直接响应 JavaScript 的数值变化，但可以作为中间媒介把 JS 计算出的百分比“透传”到 CSS。关键不是让变量自己动，而是让 width 或 transform 读取它。

进度条容器需设为 position: relative，内部条用 absolute 定位并设置 width: var(--progress, 0%)
JS 修改元素的 style.setProperty('--progress', '65%')，而非直接改 width
不要用 calc(var(--progress) * 1) 这类无效写法——CSS 不支持对百分比变量做算术运算

<div class="progress" style="--progress: 42%"><div class="bar"></div></div><p>.progress .bar {
width: var(--progress, 0%);
transition: width 0.3s ease;
}</p>

为什么 `transition` 在变量更新时没生效？

因为 CSS 变量变更不会触发重绘（re-paint）或重排（re-flow），transition 只监听属性值变化，而 var(--progress) 是计算值，不是被过渡的属性本身。

必须让被过渡的属性（如 width）是“可动画”的原生属性，且其值由变量驱动
确保 width 是 px、%、em 等可插值单位，不能是 auto 或 fit-content
如果用 transform: scaleX() 替代 width，要配合 transform-origin: left，否则会缩放中心点偏移

如何兼容 IE 或旧版 Safari？

CSS 变量在 IE 中完全不支持，Safari 9.1+ 才开始支持。如果必须兼容，不要依赖 var(--progress) 作为唯一方案。

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

降级方案：JS 直接设置 element.style.width = '65%'，同时保留变量作为现代浏览器的声明式写法
不要用 @supports ( --progress: 0 ) 包裹整个进度条样式——这会导致不支持的浏览器渲染空白
可以用 data-progress="65" 属性 + 属性选择器（如 [data-progress="65"] .bar { width: 65% }）做简单 fallback，但维护成本高

多个进度条共用同一变量会互相覆盖吗？

会。CSS 变量作用域基于 DOM 树，如果在 :root 声明 --progress，所有后代元素都读同一个值。

每个进度条应有自己的变量名，比如 --progress-1、--progress-upload，或更合理地：在每个进度条容器上设置 style="--progress: 78%"
使用 getComputedStyle(el).getPropertyValue('--progress') 读取时，拿到的是该元素自身设置的值，不是祖先的，这点和继承行为一致
避免在 JS 中全局修改 document.documentElement.style.setProperty('--progress', ...)，除非你真想批量控制所有条

变量不是魔法，它只是让 JS 和 CSS 之间多了一条干净的传参通道。真正动起来的，永远是那个被 var() 注入的 width 或 scaleX。别指望变量自己“动”，得让它驱动的属性有过渡能力，且每次更新都落在可动画的值域里。