JavaScript进度条与动画实现教程

用 requestAnimationFrame 做平滑动画，别用 setTimeout 或 setInterval

进度变化如果靠定时器硬推，容易卡顿、跳帧，尤其在页面负载高时。正确做法是用 requestAnimationFrame 驱动每一帧更新，配合缓动函数（easing）模拟真实感。

function animateProgress(el, targetWidth, current = 0, startTime = null) {
  const easeOutCubic = t => --t * t * t + 1;
  const duration = 300; // ms
<p>function step(timestamp) {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const eased = easeOutCubic(progress);
const width = current + (targetWidth - current) * eased;</p><pre class="brush:php;toolbar:false;">el.style.width = width + '%';

if (progress < 1) requestAnimationFrame(step);

} requestAnimationFrame(step); }

// 调用：animateProgress(document.querySelector('.bar'), 75);

• requestAnimationFrame 与屏幕刷新率同步，通常 60fps，比 setTimeout(..., 16) 更可靠
• 缓动函数决定“加速/减速”节奏；easeOutCubic 是常见收尾减速效果
• 直接操作 style.width 时注意单位（'%' 或 'px'），漏写会失效

CSS 动画仅适用于固定起止值，JS 控制更适合动态场景

CSS @keyframes 可以实现脉冲、流动、渐变色等效果，但前提是进度值已知且不常变。比如加载中状态用「骨架动画」：background: linear-gradient(90deg, transparent, #e0e0e0, transparent) 配合 animation 横向移动，这和 JS 更新的「确定性进度条」用途不同，二者常共存。

• 纯 CSS 方案适合「加载中」占位符，不适合显示 0→83% 这类实时反馈
• 若用 CSS transition 控制 width，需确保初始状态有 transition: width 0.3s ease-out，否则无动画
• IE11 不支持 transform: scaleX() 的 transition，老项目慎用

常见坑：百分比计算错误、未处理小数、忽略无障碍

进度值常来自异步请求的 loaded / total，直接相除可能得 NaN 或 Infinity；显示时若保留过多小数（如 99.999999%），CSS 渲染会抖动；另外，缺少 aria-valuenow 等属性会让读屏软件无法识别进度。

• 务必校验分母是否为 0：const percent = total ? Math.round((loaded / total) * 100) : 0
• 用 Math.min(Math.max(percent, 0), 100) 防止超限（如网络波动导致 loaded > total）
• 同步更新 ARIA 属性：el.setAttribute('aria-valuenow', percent)
• 移动端要注意 touch-action: none 防止拖拽进度条时触发页面滚动

实际项目里，进度条的「动起来」只是表象，真正难的是和业务逻辑对齐：上传中断后如何恢复？多阶段任务怎么嵌套？这些不在动画本身，而在状态管理的设计里。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。