<progress>元素不能替代按钮，正确方案是用按钮+自定义进度容器+JS控制状态切换，核心在于DOM替换时机与CSS过渡节奏配合。
直接用 <progress> 元素无法“变成”按钮，也不能直接替代按钮交互；真正可行的方案是用普通按钮 + 自定义进度容器 + JavaScript 控制状态切换，核心在于 DOM 替换时机和 CSS 过渡节奏的配合。
为什么不能直接给 <button> 加 value 属性
HTML 规范中 <button> 没有 value 属性用于表示进度（value 是表单控件如 <input type="radio"> 的属性），强行添加无效。有人试图用 style.width 拉伸按钮内部伪元素模拟进度，但会破坏可访问性、响应式布局，且在高缩放或屏幕阅读器下完全不可读。
正确做法是：点击后隐藏按钮文字/图标，插入一个 <div class="progress-fill"> 或保留原结构但切换 class，靠 transform 和 opacity 实现视觉过渡。
用 CSS 动画驱动进度填充，而非 JS 频繁改 style.width
频繁写 element.style.width = x + '%' 会触发重排，卡顿明显，尤其多按钮并行时。更稳的方式是用 CSS @keyframes + animation，JS 只负责启停动画和最终状态同步。
立即学习“前端免费学习笔记（深入）”；
- 给进度容器设置
animation: fill-progress 2s ease-out forwards - 定义
@keyframes fill-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } - JS 中只做
el.classList.add('is-running')，动画结束后再设el.classList.add('is-complete') - 避免用
%做关键帧单位——某些浏览器对小数精度处理不一致，改用scaleX()更可靠
按钮点击后禁用与状态恢复的边界处理
用户可能快速连点、刷新页面、或中途关闭标签页，这些都会让进度中断在中间状态。仅靠 JS 计时器（setTimeout）无法感知外部中断。
- 必须在点击时立即设
btn.disabled = true，并移除pointer-events防止穿透 - 动画完成回调里不要只靠
animationend，要加兜底逻辑：比如setTimeout(() => { if (progressEl.style.transform !== 'scaleX(1)') finish(); }, 2100) - 若进度代表真实异步任务（如上传），应在
fetch成功/失败后才调用完成逻辑，而不是单纯等动画播完 - 恢复按钮状态时，记得清空内联
style（el.style.cssText = ''），否则下次点击可能从上次残留宽度开始
移动端点击反馈丢失的常见补救
在 iOS Safari 或部分安卓 WebView 中，:active 伪类默认无样式，导致用户点下去没反应，容易误以为没点上。
- 给按钮加
-webkit-tap-highlight-color: transparent消除灰色遮罩，同时手动加:active { opacity: .7; } - 进度启动后，立刻用
el.style.pointerEvents = 'none'，防止手指未抬就触发第二次点击 - 如果用了
transform: scale()做按下效果，注意它会触发硬件加速，但可能影响父容器的overflow: hidden裁剪行为——此时改用opacity更稳妥
最易被忽略的一点：进度动画结束后的视觉收尾。很多人只做到填满，但没处理“完成态”的图标替换（比如下载箭头 → 对勾）、文字变更（“下载” → “已完成”）或延迟还原按钮状态。这些细节不补全，用户会困惑操作是否真的成功了。
