核心逻辑是用CSS动画控制width从0%到100%模拟加载，但必须由JS驱动开始、中断与完成，以对齐真实加载时机；纯CSS无法感知加载状态，硬编码时长会导致“假跑”或“卡死”，且需JS重置状态并兜底设width:100%。
用
动画模拟加载进度条的核心逻辑
本质不是真读取资源进度，而是用 CSS 动画控制一个条形元素的
从 0% 到 100%，视觉上模仿加载过程。关键在于：动画要可中断、可重置、不卡主线程，且能与 JS 的真实加载时机对齐。
最简可行方案是用
定义线性增长，配合
或
控制时长。但注意：纯 CSS 无法感知 DOM 加载完成，必须靠 JS 触发结束状态。
为什么不能只靠
一跑到底
实际页面加载时间不可控，3 秒可能太长（资源早加载完）或太短（还没加载完就结束了）。硬编码时长会导致进度条“假跑”或“卡死”。更糟的是，如果用户刷新页面中途，CSS 动画不会自动重置，
可能残留旧值。
必须用 JS 控制开始、暂停、完成三个状态，例如通过添加/移除
类
动画应设为
，保证停在 100%；但也要提供 JS 手动设
的兜底逻辑
避免用
，否则初始闪动明显
JS 如何安全触发 CSS 进度条更新
不要用
模拟进度（不准、不可取消），而应监听真实事件：比如
变化、
，或结合
监听资源加载。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
常见可靠做法是：页面开始加载时显示进度条并启动动画；所有脚本、样式表、图片加载完成后，立即停止动画并设
。
初始化时给进度条容器加
，CSS 中定义
在
中收尾
若需手动控制进度（如 Ajax 请求），改用
，并禁用 CSS 动画避免冲突
兼容性与性能容易被忽略的点
动画本身兼容性极好，但用
替代它会更流畅（GPU 加速），尤其在低端设备上。不过
需要父容器设
来裁剪，结构稍复杂。
别在
或全局 class 上写进度条样式，容易污染其他元素
动画 duration 建议设为 600–1200ms，太短看不出过程，太长显得卡顿
移动端要注意
可能引发渲染 bug，优先用
方案
如果用了 Webpack/Vite，确保 CSS 中的
没被误删（检查构建配置是否启用了
）
实际最稳的组合是：CSS 负责动画骨架，JS 负责状态驱动和最终收尾。进度条不是装饰，是加载状态的诚实表达——它该停的时候必须停，不该动的时候不能动。
widthwidth@keyframestransitionanimationanimation: loading 3s linearwidthloadingforwardswidth: 100%animation-fill-mode: backwardssetTimeoutdocument.readyStatewindow.addEventListener('load', ...)PerformanceObserverwidth: 100%class="loading".loading::before { animation: progress 800ms linear forwards; }window.addEventListener('load', () => { el.classList.remove('loading'); el.style.width = '100%'; })el.style.width = `${percent}%`widthtransform: scaleX()scaleXoverflow: hidden:rootwill-change: widthtransform@keyframespurgeCSS