应使用div模拟进度条而非原生progress标签，因其样式可控、兼容性好；disabled状态下需用loading类解耦动画，配合aria-busy和手动拦截点击；文本切换须固定尺寸防跳变，移动端需注意-webkit-appearance、px单位及transform加速。
按钮里塞进度条，innerHTML 直接拼接就行，但别硬写 <progress>
原生 <progress> 在按钮里默认样式难控制、垂直对齐错位、移动端缩放异常，实际项目中几乎没人这么干。更稳妥的做法是用 <div> 模拟进度条，配合 CSS 控制尺寸和动画。
常见错误现象：<button><progress value="50"></progress>提交</button> —— 进度条高度塌陷、文字被挤偏、点击区域变小。
- 用
<div class="btn-progress"></div>替代<progress>，通过width百分比控制进度 - 按钮设为
position: relative，进度条position: absolute覆盖底部或顶部 - 文本内容用
span包裹并设z-index: 1，确保不被进度条遮挡 - 加载态切换时，禁用按钮并移除
pointer-events: none防误点
disabled 状态下怎么让进度条动起来
按钮加 disabled 后，CSS 动画会暂停（尤其 Safari），这不是 bug，是浏览器规范行为。必须绕过 disabled 才能保持动画流畅。
- 不要用
button[disabled]，改用button:not([disabled])控制启用态样式 - 进度条动画绑定在独立的
.loading类上，与disabled解耦 - JS 中只做视觉标记：添加
class="loading"+aria-busy="true"，不设disabled - 点击事件里手动
if (el.classList.contains('loading')) return拦截，比属性禁用更可控
Vue/React 里怎么动态切换“提交”→“上传中 32%”→“完成”
纯文本替换容易导致按钮宽度跳变，尤其中英文混排时。关键不是换字，而是固定容器尺寸 + 文本居中裁剪。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设固定
min-width和text-overflow: ellipsis，防止“上传中 99%”撑开布局 - 用
data-text属性存原始文案，JS 切换时只改 innerText，不重建 DOM - 百分比更新频率建议 ≥ 200ms 一次，避免高频重绘；小于 10% 的变化可合并
- React 中避免在 render 里实时计算进度字符串，提成 useMemo 或 useReducer 管理状态
移动端点击区域缩小、进度条模糊？检查这三点
很多团队测完桌面端就上线，结果 iOS 上按钮点不动、进度条边缘发虚——基本都卡在这几个兼容细节上。
- 按钮必须有
-webkit-appearance: none，否则 Safari 会强加内边距和圆角，挤压进度条空间 - 进度条高度用
px（如4px），别用em或rem，字体缩放时它会失真 - 动画用
transform: scaleX()而非width，触发硬件加速，避免 iOS 模糊
真正麻烦的不是实现，是让“加载中”三个字和进度条在所有机型上保持视觉节奏一致——字体渲染差异、缩放策略、触摸反馈延迟，每个都得单独压测。别信“一套 CSS 走天下”。
