Spinner嵌入按钮需对齐Bootstrap盒模型与可访问性规则：设按钮relative/overflow-hidden，spinner绝对居中；尺寸用em适配按钮类型；文字包span控制显隐；CSS变量调色、手动设宽高及border-width；opacity+visibility双过渡实现平滑切换；border型适合主操作，grow型用于次要动作；必加role="status"和aria-hidden="true"；disabled时须同步键盘交互。
直接用 spinner-border 或 spinner-grow 加类，90% 的 UI 问题都出在尺寸错位、文字上跳、禁用态失效、读屏器重复播报这四点上——不是动画本身有问题，是嵌入方式没对齐 Bootstrap 的盒模型和可访问性规则。
按钮里加 Spinner 为什么文字上移、高度突变？
因为 spinner-border 默认是行内元素，不参与按钮的盒模型计算，会额外撑高父容器。它也不是“按钮的一部分”，只是被塞进去的独立节点。
- 必须给
<button></button>自身加position: relative和overflow: hidden -
spinner-border要设为position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 尺寸别写
2rem，改用1.5em（对应btn-md）、1.2em（对应btn-sm） - 原按钮文字建议包在
<span></span>里，加载时设display: none，别只靠visibility: hidden
怎么让 Spinner 颜色/大小随按钮类型自动适配？
Bootstrap 5.3+ 支持 CSS 变量覆盖，比写 !important 更干净，也避免污染全局样式。
- 颜色：在元素上直接设
style="--bs-spinner-border-color: #0d6efd;"，或定义作用域类如.spinner-primary { --bs-spinner-border-color: var(--bs-primary); } - 尺寸：没有
spinner-border-lg类，大尺寸必须手动设width/height，且要同步调border-width——例如width: 3rem; height: 3rem; border-width: 0.375rem; - 小尺寸慎用
spinner-border-sm：它固定为1rem，在btn-lg里会显得太小，建议组合自定义类：class="spinner-border spinner-btn-lg"，再用 CSS 定义尺寸
Spinner 显示/隐藏怎么做到不闪、不跳、不卡顿？
纯切 display 或 visibility 都会丢帧。真正平滑靠的是 opacity + visibility 双过渡，且延迟错开。
- 初始状态必须是
opacity: 0; visibility: hidden; - 显示时：加类触发
opacity: 1（过渡 0.2s），visibility: visible立即生效 - 隐藏时：同上设
opacity: 0，但visibility: hidden要加transition-delay: 0.2s - JS 控制只需切换一个类名（如
is-loading），所有状态交由 CSS 处理，别反复操作style
Spinner-border 和 Spinner-grow 到底该选哪个？
不是风格偏好，是识别效率问题。用户扫一眼就要知道“系统正在忙”，0.3 秒内没反应过来，就是交互失败。
-
spinner-border：有明确旋转方向和环形轮廓，弱光/小屏下依然可辨，适合主操作（提交、保存、下单） -
spinner-grow：中心脉冲缩放，视觉干扰小，但色弱或快速扫视时易被忽略，适合工具栏次要动作（刷新、重试） - 两者都必须加
role="status"和aria-hidden="true"，否则读屏器会重复读 “loading loading” - 别用
transform: scale()缩放整个 spinner 元素——会导致边框模糊、点击区域偏移、父容器塌陷
最常被忽略的其实是 disabled 状态与键盘交互的同步：JS 设置 button.disabled = true 后，还得确保回车键不会触发、Tab 键能正常跳过、焦点不意外落在 spinner 上——这些细节一漏，加载动画就从体验加分项变成可访问性 bug。
