Bootstrap 5 中 btn 内嵌 Spinner 的正确写法是：为按钮添加 position-relative，spinner-border 添加 position-absolute、top-50、start-50 和 translate-middle 实现居中，文字用 visually-hidden 隐藏以保障可访问性；需配合 JavaScript 同步控制 disabled、aria-busy 及 innerHTML 切换。
Bootstrap 5 中 btn 内嵌 Spinner 的正确写法
直接在按钮里加 spinner-border 不会自动居中，还会破坏按钮高度和内边距。Bootstrap 5 的官方推荐方式是用 position-relative + position-absolute 手动定位，同时禁用默认文字或用 visually-hidden 隐藏。
常见错误是把 spinner-border 当作按钮子元素直接塞进去却不加定位控制，结果图标贴左上角、按钮变高、点击区域错位。
- 必须给按钮添加
position-relative -
spinner-border要加position-absolute和top-50 start-50 translate-middle居中 - 按钮文字需设为
visually-hidden（不能用display: none，否则影响可访问性） - 如果想保留文字+图标共存（如“提交中…”），就不要隐藏文字，改用
ps-2或pe-2微调间距
SpinnerButton 的 JavaScript 状态控制逻辑
纯 HTML 只能静态展示加载态，实际要用 JS 控制按钮的启用/禁用、图标显示/隐藏、文字切换。关键点不是“加 spinner”，而是同步管理 disabled 属性、aria-busy 和视觉反馈。
容易忽略的是：没设 aria-busy="true" 会影响屏幕阅读器；没同步禁用按钮会导致重复提交；重置时忘记恢复 innerHTML 容易残留旧 DOM。
- 点击后立即设
btn.disabled = true和btn.setAttribute('aria-busy', 'true') - 用
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">加载中</span>'替换内容 - 异步完成后再恢复原始 innerHTML，并移除
aria-busy、重置disabled - 建议封装成函数，接收原始按钮元素和加载文案，避免硬编码
兼容旧版 Bootstrap 4 的 Spinner 写法差异
Bootstrap 4 没有 translate-middle 工具类，且 spinner-border 默认尺寸更大，直接复用 BS5 代码会在 BS4 下偏移失效或图标溢出。
如果你项目还在用 BS4，别强行套用 BS5 的居中类——它根本不存在。得手动补 CSS 或改用 flex 布局。
- BS4 推荐方案：按钮加
d-flex align-items-center justify-content-center，再把spinner-border放里面（不加绝对定位） - BS4 的
spinner-border默认是width: 2rem; height: 2rem;，BS5 是1.5rem，需用spinner-border-sm对齐 - BS4 不支持
visually-hidden，得用sr-only - BS4 按钮无
position-relative类，需自行加style="position: relative;"或自定义 CSS
为什么不用第三方组件而坚持手写 SpinnerButton
很多 UI 库（比如 Vue 的 v-button 或 React 的 Antd Button loading 属性）看似省事，但它们往往把 loading 态耦合进组件生命周期，一旦要定制图标颜色、尺寸、文字位置或加 tooltip，就得绕过封装甚至 patch 源码。
手写虽然多几行，但所有控制权都在你手里：比如 hover 时 spinner 旋转加速、失败后加抖动动画、或根据网络延迟动态决定是否显示 spinner（
真正复杂的不是加个图标，而是让 loading 态在各种边界场景下都可靠：表单重复提交拦截、键盘回车触发、屏幕阅读器播报、深色模式适配、RTL 文本方向下的图标对齐……这些细节，通用组件通常只覆盖 80%。
