动态进度条应使用CSS自定义属性--progress控制宽度，JS仅更新变量值，CSS通过calc()计算width并配合transition实现平滑动画；需避免max-width/flex-basis干扰，推荐--progress取0–1小数，background用linear-gradient实现多段色块。
用 --progress 变量控制宽度，别直接写死 width
动态进度条的核心不是靠 JS 频繁改 style.width，而是把进度值抽成 CSS 自定义属性，让 CSS 自己算宽度。只要 JS 更新一次 style.setProperty('--progress', value)，后续动画、过渡都由 CSS 承担。
常见错误是 JS 里反复设置 element.style.width = x + '%' ——这会覆盖所有 CSS 过渡，且无法和伪元素、渐变等配合。正确做法是只动变量：
-
--progress值建议用 0–100 的整数（语义清晰，JS 计算方便） - CSS 中用
width: calc(var(--progress) * 1%);或直接width: calc(var(--progress) * 1%);（注意单位要一致） - 必须给
transition: width 0.3s ease;，否则变量变了，宽度跳变
过渡失效？检查是否用了 max-width 或 flex-basis
即使写了 transition: width，进度条仍可能“瞬移”，大概率是因为父容器或自身设置了 max-width、flex-basis 或 grid-column 类属性——这些属性不参与 width 过渡链，会截断渲染流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在进度条元素上显式声明
max-width: none;或设为足够大值（如max-width: 100vw;） - 若在 Flex 容器中，加
flex: 0 1 auto;避免flex-basis干扰宽度计算 - 用浏览器开发者工具的“Computed”面板，确认最终生效的
width值是否随变量实时变化
兼容性陷阱：calc() 里不能直接用无单位变量
下面这段代码在 Safari 15.6 之前会失效：
--progress: 65; width: calc(var(--progress) * 1%);
因为旧版 Safari 不支持在 calc() 中对无单位变量做乘法运算。安全写法是让变量自带单位：
- JS 设置时带单位：
el.style.setProperty('--progress', '65%'); - CSS 直接用：
width: var(--progress); - 或者统一用小数变量：
--progress: 0.65;，CSS 写width: calc(var(--progress) * 100%);
推荐后者，数值语义更准（比如 0.65 表示 65%），也避免字符串拼接出错。
需要多段色块？用 background + linear-gradient 替代多个 DOM 元素
想实现“0–30% 蓝、30–70% 黄、70–100% 红”这种分段效果，别再塞三个 <span> 拼宽度。用一个元素 + 渐变背景更轻量：
background: linear-gradient( 90deg, #3b82f6 0%, #3b82f6 calc(var(--progress) * 0.3), #eab308 calc(var(--progress) * 0.3), #eab308 calc(var(--progress) * 0.7), #ef4444 calc(var(--progress) * 0.7), #ef4444 100% );
注意点：
- 所有百分比位置都基于
var(--progress)动态缩放，不是固定值 - 渐变方向用
90deg（横向），确保从左到右填充 - 相邻色块起止位置必须严格衔接，否则会出现空白或重叠
这种写法在滚动或高频更新场景下比操作多个 DOM 节点稳定得多，也更容易配合同步动画。
