Bootstrap Spinner需用absolute定位居中并匹配按钮em尺寸，加载时用opacity+visibility双过渡实现淡入淡出，全屏遮罩z-index至少1070且fixed定位，自定义动画须保证偶数像素、整数边框、rotate旋转及GPU加速。
Bootstrap Spinner 怎么加进按钮里不塌陷、不偏移
直接给 <button></button> 加 spinner-border 类，十有八九会文字上跳、高度错乱、旋转中心跑偏——因为 spinner 默认是行内元素，尺寸固定（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()缩放，会模糊边框 - 加载时隐藏文字：用
visibility: hidden（保留占位），别删文本节点或设display: none，否则按钮宽度会突变 - 淡入：
opacity从 0→1（transition: opacity 0.2s），visibility立即设为visible（transition-delay: 0s） - 淡出：
opacity从 1→0（同上），但visibility延迟到 opacity 结束后才变hidden（transition-delay: 0.2s） - 别忘了初始状态加
opacity: 0; visibility: hidden，否则第一次显示会无过渡 - overlay 的
z-index至少设为1060，推荐1070 - 必须用
position: fixed，不能absolute，否则滚动时会偏移 - 背景用
rgba(0,0,0,0.5)，别用纯黑+opacity，避免 Safari 下透明度叠加异常 - 如果 Modal 是动态创建的（比如 Vue/React），确保 overlay 插在
最外层，不要嵌在 Modal 容器里 - 容器宽高必须是偶数像素（如
40px），奇数会导致 subpixel 渲染失真 - 边框宽度要是整数（
3px比3.5px稳定），且border-radius: 50%不能省 - 动画用
transform: rotate()，别用left/top位移模拟，后者触发布局重排 - 加
will-change: transform或backface-visibility: hidden强制 GPU 加速，尤其在低配设备上明显
Spinner 显示/隐藏怎么做到淡入淡出不闪
直接切 display: none/block 或 visibility: hidden/visible 都会卡顿或跳帧。真正平滑靠的是 opacity + visibility 双过渡，且要错开触发时机。
关键在 CSS 过渡延迟设计：
JS 控制只需切一个类名，比如 showing，CSS 里定义它的 opacity 和 visibility 值即可，不用反复操作 style。
全屏加载遮罩盖不住 Bootstrap Modal 怎么办
Modal 默认 z-index 是 1055，如果你的 loading overlay 没显出来，大概率是 z-index 不够——不是“调高就行”，而是得比 Modal 的 backdrop（1050）和 content（1055）都高，还要留余量防冲突。
稳妥做法：
自定义 Spinner 动画为什么转得卡顿或偏心
自己写的 CSS spinner（比如 @keyframes spin + border）容易出现旋转抖动、中心漂移、边缘模糊，根本原因常是渲染管线没对齐。
几个硬性检查点：
如果只是想换颜色或大小，优先用 Bootstrap 内置的 text-primary 和 spinner-border-sm，比手写更稳。
