进度条应使用css变量--progress动态控制填充比例，html中设无单位数值如--progress:85，css中用calc(var(--progress)*1%)计算宽度，ie降级用@supports检测，避免width与transform混用导致卡顿。
用 --progress 变量控制填充比例，别写死数值
进度条的核心是动态填充，CSS变量就是最轻量的配置入口。把填充比例抽成 --progress，就能在 HTML 里直接改内联样式或通过 JS 注入，不用动 CSS 文件。
常见错误是写成 width: 60%; 或用 @property（兼容性差），其实只需要：
progress-bar {
--progress: 0;
background: #e0e0e0;
}
progress-bar::after {
content: '';
display: block;
height: 100%;
width: calc(var(--progress) * 1%);
background: #4caf50;
transition: width 0.3s ease;
}
注意：必须用 calc(var(--progress) * 1%)，不能写 var(--progress)% —— 浏览器不识别这种单位拼接，会直接失效。
HTML 中设置变量值要带单位（数字+百分号）
很多人在 style 里写 --progress: 75，结果没反应 —— 因为 calc() 里乘的是 1%，--progress 必须是纯数字，但 HTML 设置时得让它“可读”又“可用”。
正确做法是统一用无单位数字，靠 CSS 计算补单位：
<div class="progress-bar" style="--progress: 85"></div>- 对应 CSS 保持
width: calc(var(--progress) * 1%) - 如果传入字符串如
"85%"，JS 注入时需先.replace('%', '')再设变量
IE 不支持 CSS 变量？用 max-width + width 回退方案
IE11 及更早版本完全不认 var(--x)，但项目又不能放弃，就得准备降级路径。核心思路是：让默认状态显示“空”，再用支持变量的浏览器覆盖。
实操建议：
- 给元素设
width: 0;作为 IE 默认态 - 用
@supports (--a: 0)包裹变量逻辑，只在支持环境生效 - 避免用
!important强覆盖，容易和后续 JS 修改冲突
示例片段：
@supports (--progress: 0) {
.progress-bar::after {
width: calc(var(--progress) * 1%);
}
}
动画卡顿？别在 ::after 上做 transform 混合动画
有人为了“更顺滑”给 ::after 加 transform: scaleX(...)，结果发现和 width 过渡混用时掉帧严重 —— 因为 scaleX 触发重排，width 也触发重排，浏览器扛不住。
真正轻量的做法只有两个：
- 坚持用
width+transition，现代浏览器优化得很成熟 - 如果必须用
transform，就彻底弃用width，改用transform: scaleX(var(--progress) / 100)，且确保父容器overflow: hidden - 别同时写
width和transform在同一个伪元素上
变量值范围建议始终约束在 0–100，超出不会报错但可能渲染异常，比如负数导致宽度塌缩不可逆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
