带加载动画的提交按钮需点击即禁用、视觉反馈清晰、失败可恢复，应使用语义化button元素，立即设置disabled和loading状态，配合CSS硬件加速旋转动画，并在异步操作finally中重置状态。
制作带加载动画的提交按钮，核心是“点击即变、真禁用、视觉反馈清晰、失败可恢复”。不是加个旋转图标就完事，而是状态控制、DOM操作和CSS动画三者配合。
用 button 元素，别用 input 或 div
语义正确、可访问性好、原生支持 disabled 和 :active。input[type="submit"] 不接受子节点，没法嵌 loading 图标；div 没有表单提交能力，还得手动绑定事件，容易漏掉回车提交等边界情况。
- 写成
<button type="submit">提交</button>，结构干净，行为可控 - 如果必须用 input，只能靠 background-image + value 文字切换，灵活性差、动画难同步
- 禁用时不要只写
pointer-events: none，它不阻断键盘回车，也不被屏幕阅读器识别为“忙”
点击瞬间就进 loading 状态
不是等 fetch 返回才动，而是在 click 或 submit 事件第一行就处理。网络慢时用户狂点，延迟响应会导致多次请求。
- JS 中立即执行：
btn.disabled = true+btn.textContent = '提交中...' - 或保留 disabled 功能，但用 class 控制视觉（如
btn.classList.add('loading')），再配aria-busy="true"告诉读屏软件 - form 提交场景下，记得在
event.preventDefault()后统一控制，防止回车重复触发
纯 CSS 实现流畅旋转图标
避免 GIF 或 JS 定时器，用硬件加速的 transform 动画最轻量、兼容好、不卡主线程。
立即学习“前端免费学习笔记（深入）”；
- 推荐内联 SVG 或伪元素
::after，加transform: rotate()+will-change: transform - CSS 示例：
.btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; margin-left: 8px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 移动端注意加
-webkit-tap-highlight-color: transparent和button:active样式，确保点击有压感
所有异步出口都得手动还原
成功跳转了页面，用户看不到问题；但失败后按钮卡死、文字没改回来、错误提示堆着不清理——这才是真实线上事故高发点。
- fetch/axios 的
finally块里必须重置：btn.disabled = false、btn.textContent = '提交'、btn.classList.remove('loading') - React 中要防组件卸载后 setState 报错，加
isMounted判断或用useAsync封装 - 服务端仍要做幂等校验（如 Idempotency-Key），前端防不住绕过行为
