用width配合@keyframes可实现从左到右的加载进度条：容器设overflow:hidden，进度条设width:0%、block、height和背景色，再通过@keyframes定义width从0%到100%的变化，并用animation:progressGrow 2s ease-out forwards绑定动画。
用 width 配合 @keyframes 实现从左到右的加载进度条，核心是让一个条形元素的宽度从 0% 动态增长到 100%，同时保持左对齐、背景色明显、无其他干扰动画。
基础结构：容器 + 进度条元素
HTML 只需两层结构：外层容器控制位置和边界，内层条形元素负责动效。
- 容器设
overflow: hidden，防止进度条撑出或溢出 - 进度条设
display: block、height（如 4px）、background（如 #4a90e2） - 进度条默认
width: 0%，后续靠动画拉伸
关键动画：用 keyframes 定义 width 变化
CSS 动画不依赖 JS，纯靠声明式规则驱动。定义一个从 0% 到 100% 的 width 过程即可：
@keyframes progressGrow {
from { width: 0%; }
to { width: 100%; }
}
然后将该动画绑定到进度条上：
立即学习“前端免费学习笔记（深入）”；
animation: progressGrow 2s ease-out forwards;-
forwards确保动画结束后停留在 100% 宽度，不会回退 -
ease-out让增长略带减速感，更自然（也可用linear匀速）
可选增强：支持手动控制进度值
如果需要 JS 控制具体进度（比如加载到 65% 时暂停），就别用 keyframes 全程驱动，改用 JS 动态设置 width：
- CSS 中去掉 animation，只保留基础样式
- JS 里直接操作
element.style.width = '65%'; - 如需平滑过渡，加一句
transition: width 0.3s ease;到进度条样式中
注意细节：避免常见错位问题
进度条“从左到右”增长的前提是它自身默认左对齐且不浮动、不 flex 居中：
- 确保进度条没有
margin: auto或justify-content: center - 容器不要设
text-align: center（除非进度条是 inline 元素） - 若用 Flex 布局，容器加
justify-content: flex-start更稳妥
