进度按钮（点击下载进度条实时填充动画源码）

效果演示（真实可交互）

进度条在按钮内部从左到右填充，文字百分比实时更新

完整代码

HTML 结构：

<button id="pg-btn" class="pg-btn">
  <span class="pg-bar" id="pg-bar"></span>
  <span class="pg-text" id="pg-text">点击开始下载</span>
</button>

CSS 核心代码：

.pg-btn { position: relative; width: 240px; padding: 14px 0;
  border: none; border-radius: 12px; overflow: hidden;
  background: #1b1f2e; color: #fff; cursor: pointer; }
/* 进度条层 */
.pg-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #4d96ff, #7c5cff);
  transition: width .15s linear; pointer-events: none;
}
/* 完成态 */
.pg-btn.pg-done .pg-bar {
  background: linear-gradient(90deg, #22c55e, #16a34a); opacity: .35;
}
/* 文字层置于进度条之上 */
.pg-text { position: relative; z-index: 1; font-weight: 600; }

JS 逻辑（requestAnimationFrame 驱动）：

const step = () => {
  progress += Math.random() * 4 + 2;   // 模拟网络波动：每次 2~6%
  if (progress >= 100) {
    progress = 100;
    bar.style.width = '100%';
    text.textContent = '100% · 下载完成 ✓';
    btn.classList.add('pg-done');
    return;
  }
  bar.style.width = progress + '%';
  text.textContent = Math.floor(progress) + '%';
  timer = requestAnimationFrame(step);
};

参数说明

兼容性与性能

• requestAnimationFrame 由浏览器按刷新率（60/120Hz）调度，比 setInterval 更平滑且页面切后台自动暂停，省电
• width 属性动画在进度条这种小尺寸元素上开销可忽略；如需极大规模可改 transform: scaleX + transform-origin: left
• 兼容所有现代浏览器；<button> 语义化 + aria 属性便于读屏播报进度
• 真实场景：把随机增量换成上传/下载接口的 onprogress 回调（loaded / total），即可显示真实进度

常见问题

Q: 为什么不用 setInterval 而用 requestAnimationFrame？ rAF 与屏幕刷新同步，进度更平滑；页面切到后台时自动停止，不会空转消耗 CPU；这是进度动画的最佳实践。

Q: 进度到 100% 后如何恢复可点击？ 完成态加 pg-done 后若需重新执行，点击前先移除类、清零 progress 并重置 bar 宽度，或提供重置按钮（本组件已内置）。

Q: 能显示剩余时间吗？ 可以，记录 startTime 与已传字节数，用 剩余 = (total - loaded) / 速率 估算，注意网络波动会导致估算跳变，建议做平滑滤波。

Q: 进度条可以换成圆形吗？ 可以，把 bar 换成 conic-gradient 背景并让 --p 自定义属性随进度更新：background: conic-gradient(#4d96ff var(--p), #1b1f2e 0)，兼容性良好。