用--progress变量控制进度条宽度需通过width: var(--progress, 0%)绑定，JS调用style.setProperty('--progress', '65%')更新值，配合transition: width 0.3s ease实现动画；变量本身不触发重绘，必须驱动可动画的width属性，且避免calc对百分比变量运算。
怎么用 --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。别指望变量自己“动”，得让它驱动的属性有过渡能力，且每次更新都落在可动画的值域里。
