纯css动态进度条需js控制真实加载状态，style.width最稳，css变量+calc()更灵活但易出错，linear-gradient适合视觉强化，scroll()驱动仅限新浏览器。
纯 CSS 实现动态进度条，本质是「让宽度动起来」，但动的方式决定它能不能真实反映加载状态。硬写 @keyframes 动画只适合占位或伪加载；真要匹配后端返回的 loaded / total 比例，必须靠 JS 控制变量或内联样式，CSS 只管过渡和渲染。
用 style.width 直接控制最稳
这是兼容性最好、逻辑最直白的做法，尤其适合文件上传、fetch 加载等需实时反馈的场景。
- 进度条子元素初始设
width: 0%，父容器加overflow: hidden - JS 中直接赋值：
el.style.width = (loaded / total * 100) + '%'，注意除零保护（total === 0时设为'0%'） - 过渡必须写在子元素上：
transition: width 0.3s ease-out，别写在父容器 - 避免用
max-width或flex-basis替代width，它们不触发同一类布局重排 - 如果用 React/Vue，优先绑定内联
style，不要每次更新都手动调用el.style.width
用 CSS 变量 + calc() 更灵活但易踩坑
适合需要多进度条独立控制、或想把逻辑更多交给 CSS 的项目，但变量作用域和单位必须严丝合缝。
- 变量必须设在目标元素上：
el.style.setProperty('--progress', '65')，而不是:root - CSS 中写：
width: calc(var(--progress) * 1%)，不能漏掉*和单位，也不能写成calc(var(--progress, 0) * 1px)（--progress是百分比值，不是像素） - 必须配
transition: width 0.25s linear——CSS 变量本身不可过渡，但依赖它的width可以 - 检查 Elements 面板里该元素的
style行是否真出现了--progress: 65，大小写也要完全一致 - 多个进度条各自独立？每个都要单独调用
setProperty，别共用一个变量名
linear-gradient 实现“无宽”进度条
不改元素尺寸，只挪背景色位置，适合做视觉强化型进度条（比如带条纹、多色分段），但无法精确对应数值。
- 核心是
background-size: 200% 100%+background-position动画 - 渐变中用
50%当分界点，就表示「已完成一半」；改成calc(var(--progress) * 1%)也能联动 JS - 条纹效果用
repeating-linear-gradient，配合background-position动画模拟流动感 - 硬切边效果可写：
linear-gradient(to right, #2196F3 0%, #2196F3 calc(var(--progress) - 1px), #f5f5f5 calc(var(--progress) + 1px)) - 注意：这种方案无法响应任意百分比（如 37.2%），因为 background-position 是连续动画，但渐变断点是离散的像素级渲染
用 animation-timeline: scroll() 做阅读进度条
这是真正零 JS、高性能的滚动驱动方案，但目前仅 Chromium 115+ 和 Safari 17.4+ 支持，别在生产环境盲目启用。
- 不用监听
scroll事件，也不用算window.scrollY / document.documentElement.scrollHeight - 直接写：
animation-timeline: scroll(); animation-range: 0% 100%;，浏览器自动把滚动位置映射为动画时间线 - 进度条用
transform: scaleX()最稳妥，比width更少触发重排 - 若需兼容老浏览器，得 fallback 到 JS 方案，不能只靠 CSS
- 注意：它绑定的是最近可滚动祖先，默认是
document，不是某个 div 容器
真正难的不是怎么动，而是怎么让它「动得准」——JS 给的数值是否可靠、CSS 是否按预期解析单位、过渡是否被其他样式干扰。这些细节没对齐，再炫的渐变或 timeline 都会卡在 73% 不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
