按钮内 spinner 布局错位主因是 spinner-border 默认行内、宽高固定 2rem，与按钮动态高度不联动；需设按钮 position: relative/overflow: hidden，spinner 用 absolute 居中并以 em 设宽高，配合 opacity+visibility 双过渡实现平滑淡入淡出，且须严格处理 aria 属性、disabled 状态及文字节点清理。
直接用 spinner-border 或 spinner-grow 类能快速出效果，但不加控制地往按钮里塞，90% 会出布局错位、文字上跳、点击穿透、读屏器重复播报等问题——这不是动画没生效，是状态没对齐。
按钮里加 Spinner 为什么总塌陷或偏移
根本原因是 spinner-border 默认是行内元素，宽高固定为 2rem，而按钮高度由 padding 和 font-size 动态决定，两者盒模型不联动。
- 必须给
<button></button>加position: relative和overflow: hidden <div class="spinner-border"> 要插在按钮内部，并设为 <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)- 宽高必须用
em：按钮是btn-md就设width: 1.5em; height: 1.5em；btn-sm用1.2em；别写死px或用scale()缩放，否则边框模糊、旋转中心偏 - 原按钮文字建议包在
<span></span>里，加载时设display: none，而不是只靠visibility: hidden，否则按钮宽度会突变 - 初始状态必须设
opacity: 0; visibility: hidden - 淡入：加类如
showing，其中opacity: 1（transition: opacity 0.2s），visibility: visible（transition-delay: 0s） - 淡出：同一类名移除时，
opacity: 0（同上），但visibility: hidden必须带transition-delay: 0.2s，确保透明后才真正不可见 - JS 只需切换类名，不要反复操作
style，否则容易漏掉某一项 -
spinner-border有明确旋转方向+环形轮廓，弱光/小尺寸下也易识别，适合主操作按钮（提交、保存、下单） -
spinner-grow是中心脉冲缩放，动画轻但视觉信号弱，容易被忽略，更适合工具栏里的次要动作（刷新、筛选、折叠） - 两者都必须加
role="status"，且 spinner 元素本身要加aria-hidden="true"，否则读屏器会把 “Loading” 读两遍 - 颜色统一走 Bootstrap 文本色类：
text-primary、text-success等，别硬写color
淡入淡出动画怎么写才不闪
直接切 display: none/block 或靠 JS 操作 style.opacity 都会卡顿。真正平滑靠的是 opacity 和 visibility 的双过渡配合延迟触发。
spinner-border 和 spinner-grow 到底选哪个
不是看喜不喜欢，是看用户识别效率和上下文权重。
最常被忽略的不是动画本身，而是 disabled 状态、文字节点清理、font-size 继承链这三件事——少一个，加载动画就变成 UI bug。Spinner 只是零件，状态同步得靠 JS 控制类名和 DOM，Bootstrap 不替你管业务逻辑。
