直接用--progress变量配合calc(var(--progress)*1%)可实现js控制、平滑过渡、多实例隔离的动态进度条；width:var(--progress)%因css解析器不支持字符串拼接而失效，必须用calc注入单位。
直接用 --progress 变量 + calc(var(--progress) * 1%) 就能实现真正可 JS 控制、平滑过渡、多实例隔离的动态填充效果；别写 var(--progress)%，那行不通。
为什么 width: var(--progress)% 一定不生效
CSS 解析器不做字符串拼接。你设 --progress: 75，var(--progress)% 展开后是 75% —— 看似对，但实际浏览器把它当作文本字面量处理，而非合法尺寸声明，整个 width 规则被静默丢弃，回退到初始值（常为 auto 或 0）。
必须把单位“抽出来”，交给 calc() 做乘法：
-
width: calc(var(--progress, 0) * 1%)——--progress存纯数字（如82），1%提供单位 -
fallback写成var(--progress, 0)，不是var(--progress, 0%)，否则0% * 1%是非法运算 - 若用小数表示（如
0.82），则写calc(var(--progress, 0) * 100%)
JS 更新时最容易踩的三个坑
style.setProperty() 看似简单，但错一点就卡住不动：
- 变量名大小写敏感：
--Progress和--progress是两个变量，DevTools 的 Styles 面板里要确认它真实出现在该元素的style行内样式中 - 传入非数字值（
null、''、'abc'）会导致calc()计算失败，width显示为calc(NaN%)，视觉上进度条“消失” - 别用
setAttribute('style', '--progress: 65')—— 它会覆盖全部已有内联样式，比如误删height或background
正确写法：el.style.setProperty('--progress', String(Math.min(Math.max(0, num), 100)))
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
多个进度条如何各自独立动
不能把 --progress 定义在 :root，也不能靠 class 切换预设值。每个进度条必须是独立 DOM 节点，变量挂载在其自身上：
- HTML 结构示例：
<div class="progress-bar" data-id="upload"></div>、<div class="progress-bar" data-id="sync"></div> - JS 分别操作：
uploadEl.style.setProperty('--progress', '82')、syncEl.style.setProperty('--progress', '47') - CSS 统一定义：
.progress-bar { --progress: 0; width: calc(var(--progress) * 1%); transition: width 0.25s linear; }
这样每个条的变量作用域互不干扰，也不依赖继承链，调试时一眼就能在 Elements 面板里定位到具体哪个元素的变量值错了。
transition 不动？先检查这三处干扰项
写了 transition: width 0.3s ease 却还是跳变，大概率是这些属性在背后截断了宽度计算链：
-
max-width：哪怕设了max-width: 100%，也可能压制calc()结果，建议显式写max-width: none或足够大的值（如100vw） -
flex-basis：在 Flex 容器中，flex-basis优先级高于width，加flex: 0 1 auto可解除锁定 - 父容器限制：如果父元素
display: grid或overflow: hidden，也会影响子元素最终渲染宽度
最靠谱的验证方式：打开 DevTools → Computed 标签页，实时观察 width 的计算值是否随 --progress 变化而更新 —— 如果没变，说明上面某处配置拦住了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
