按钮加载态需JS显式控制：禁用、隐藏原文、绝对定位居中spinner、存取原始文本、finally重置、移动端禁pointerEvents，并按识别效率选spinner-border或spinner-grow。
按钮点击后必须立即禁用、替换内容并显示视觉反馈，否则用户会重复提交；Bootstrap 5 本身不提供自动状态管理，所有切换逻辑必须由 JS 显式控制。
为什么只加 spinner-border 类会让按钮变高、文字上移
因为 spinner-border 是行内元素，默认无宽高约束，也不参与按钮的盒模型计算——它会额外撑开高度，同时把原有文字“顶上去”。这不是样式 bug，而是 CSS 渲染机制导致的必然结果。
- 必须给
<button>元素自身加position: relative和overflow: hidden -
spinner-border要用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中，不能靠margin或text-align - 尺寸别写死（如
2rem），改用1.5em（对应btn-md）或1.2em（对应btn-sm），才能随字体缩放 - 原始文字必须包裹在
<span class="btn-text">里，加载时设display: none，否则会和 spinner 堆叠
JS 控制加载状态时最常漏的三件事
纯 CSS 无法闭环处理加载态：禁用、文字隐藏、spinner 显示/移除必须同步，否则键盘仍可回车、用户点不到却看不出原因、读屏器重复播报。
- 加载开始时，仅设
btn.disabled = true不够——还要btn.querySelector('.btn-text').style.display = 'none'，再插入 spinner 元素 - 恢复时不能只在
fetch().then()里操作，必须进finally块：无论成功、失败、abort 都要调用统一的重置函数 - 移动端需额外加
btn.style.pointerEvents = 'none'，防止安卓 WebView 或老版 iOS 的点击穿透 - 原始文字得提前存到
btn.dataset.originalText，避免恢复时取错值（innerText会丢空格，textContent更稳妥）
spinner-border 和 spinner-grow 在按钮里怎么选
不是看哪个“好看”，是看用户能否在 0.3 秒内无意识识别出“正在加载”——这是交互效率问题，不是风格偏好。
-
spinner-border有明确旋转方向 + 环形轮廓，识别率高，适合主操作按钮（提交、保存、下单） -
spinner-grow是中心脉冲缩放，动画轻，但在弱光屏、小尺寸按钮或色弱场景下容易被忽略，更适合工具栏里的次要动作（如刷新列表） - 两者都必须加
role="status"和aria-hidden="true"，否则读屏器会重复读 “loading loading” - 别用
innerHTML直接拼字符串，推荐用document.createElement('span')创建 spinner，再appendChild，避免 XSS 和 data-* 属性丢失
真正卡住人的从来不是加个类，而是 disabled 没同步、文字节点没清理、spinner 尺寸没随按钮 font-size 缩放——这些细节一漏，加载动画就变成 UI bug。
