纯CSS无法可靠实现按钮加载中状态，因它不能禁用交互、同步隐藏文字或自动恢复；需JS闭环控制disabled、aria属性、spinner显隐、原始文本存取及finally重置。
纯 CSS 无法可靠实现按钮加载中状态——它能显示旋转图标，但无法禁用交互、同步隐藏文字、或在请求结束后自动恢复。你看到的“CSS 实现”，90% 是半残状态：按钮还能回车、文字和 spinner 堆叠、移动端点击穿透、读屏器重复播报。
为什么只用 :disabled + ::after 动画会出问题
常见写法是给按钮加 loading 类，再用 ::after 伪元素画个旋转环。这看似简单，实则埋了三处硬伤：
- 伪元素不参与 DOM 树，
aria-hidden="true"和role="status"无法绑定，读屏器会把“提交”和“loading”都读出来 -
button:disabled::after依赖 disabled 状态触发，但 disabled 属性必须由 JS 设置才真正阻断键盘（空格/回车）和表单序列化 - 伪元素宽高靠
content: ""+border撑开，尺寸固定（如1rem），在btn-sm或缩放字体下会偏大或偏小，且无法响应currentColor变色逻辑
spinner-border 必须配合 position: relative 和 overflow: hidden
直接往 <button> 里插入 <span class="spinner-border"></span>，90% 会错位、文字上跳、高清屏露边。这不是 spinner 写得不对，是按钮没提供定位上下文：
- 必须给
<button>元素自身加position: relative—— 不要指望父容器，按钮自己才是定位根 - 必须加
overflow: hidden，否则 spinner 的圆角边框在 DPR > 2 的屏上会轻微溢出，视觉上“毛边” - spinner 要用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中，不能靠margin或text-align - 尺寸推荐
width: 1.5em; height: 1.5em（对应btn-md），btn-sm改用1.2em，避免 px 硬编码
JS 控制时最容易漏掉的四件事
哪怕你用了 Bootstrap 的 spinner-border，只要 JS 控制不闭环，用户就会感知到“卡顿”或“点不动”：
立即学习“前端免费学习笔记（深入）”；
- 禁用按钮只写
btn.disabled = true不够，还得补btn.setAttribute('aria-disabled', 'true')和btn.tabIndex = -1，否则 NVDA/Firefox 可能不播报状态变化 - 原始文字不能靠
visibility: hidden，得用<span class="btn-text">提交</span>包裹，加载时设display: none，否则按钮宽度会塌缩、布局跳动 - 恢复逻辑必须进
.finally()，不是.then()或.catch()—— 接口超时、abort、400 错误都得重置 - 移动端要额外加
btn.style.pointerEvents = 'none'，部分安卓 WebView 对disabled的拦截不彻底，轻点可能穿透到背后元素
最常被忽略的是：按钮原始文本必须存进 dataset（如 btn.dataset.originalText = btn.textContent），而不是每次恢复时重新取 innerText —— 后者会丢空格、换行和内联 HTML 结构。
