核心逻辑是用css动画控制width从0%到100%模拟加载，但必须由js驱动开始、中断与完成，以对齐真实加载时机；纯css无法感知加载状态，硬编码时长会导致“假跑”或“卡死”，且需js重置状态并兜底设width:100%。
用 width 动画模拟加载进度条的核心逻辑
本质不是真读取资源进度，而是用 CSS 动画控制一个条形元素的 width 从 0% 到 100%，视觉上模仿加载过程。关键在于：动画要可中断、可重置、不卡主线程，且能与 JS 的真实加载时机对齐。
最简可行方案是用 @keyframes 定义线性增长，配合 transition 或 animation 控制时长。但注意：纯 CSS 无法感知 DOM 加载完成，必须靠 JS 触发结束状态。
为什么不能只靠 animation: loading 3s linear 一跑到底
实际页面加载时间不可控，3 秒可能太长（资源早加载完）或太短（还没加载完就结束了）。硬编码时长会导致进度条“假跑”或“卡死”。更糟的是，如果用户刷新页面中途，CSS 动画不会自动重置，width 可能残留旧值。
- 必须用 JS 控制开始、暂停、完成三个状态，例如通过添加/移除
loading类 - 动画应设为
forwards，保证停在 100%；但也要提供 JS 手动设width: 100%的兜底逻辑 - 避免用
animation-fill-mode: backwards，否则初始闪动明显
JS 如何安全触发 CSS 进度条更新
不要用 setTimeout 模拟进度（不准、不可取消），而应监听真实事件：比如 document.readyState 变化、window.addEventListener('load', ...)，或结合 PerformanceObserver 监听资源加载。
常见可靠做法是：页面开始加载时显示进度条并启动动画；所有脚本、样式表、图片加载完成后，立即停止动画并设 width: 100%。
- 初始化时给进度条容器加
class="loading"，CSS 中定义.loading::before { animation: progress 800ms linear forwards; } - 在
window.addEventListener('load', () => { el.classList.remove('loading'); el.style.width = '100%'; })中收尾 - 若需手动控制进度（如 Ajax 请求），改用
el.style.width = `${percent}%`，并禁用 CSS 动画避免冲突
兼容性与性能容易被忽略的点
width 动画本身兼容性极好，但用 transform: scaleX() 替代它会更流畅（GPU 加速），尤其在低端设备上。不过 scaleX 需要父容器设 overflow: hidden 来裁剪，结构稍复杂。
- 别在
:root或全局 class 上写进度条样式，容易污染其他元素 - 动画 duration 建议设为 600–1200ms，太短看不出过程，太长显得卡顿
- 移动端要注意
will-change: width可能引发渲染 bug，优先用transform方案 - 如果用了 Webpack/Vite，确保 CSS 中的
@keyframes没被误删（检查构建配置是否启用了purgeCSS）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
