怎样为Bootstrap5按钮添加CSS加载动画

正确实现按钮加载态需三步：按钮加 position: relative 和 overflow: hidden；spinner-border 用 absolute 居中+em 尺寸+显式 animation；文字用 display: none + disabled 同步控制。

直接往按钮里加 spinner-border 类，90% 会错位、文字上跳、点击穿透——不是动画没生效，是布局没约束。

按钮必须加 position: relative 和 overflow: hidden

否则 spinner-border 作为绝对定位元素找不到参照，会溢出或偏移。Bootstrap 默认不设这俩属性，必须手动补上。

1. 给 <button> 元素直接加 style="position: relative; overflow: hidden;"，或写 CSS 规则：button.loading { position: relative; overflow: hidden; }
2. 不要依赖父容器设 position: relative，按钮自己才是定位上下文
3. overflow: hidden 不仅防溢出，还避免 spinner 边框在高清屏上渲染模糊时“露边”

spinner-border 必须用 absolute 居中 + em 尺寸

默认 spinner-border 是行内元素、宽高固定 2rem，和按钮动态高度完全脱节。硬塞进去只会拉高按钮、顶跑文字。

1. 给 spinner 元素加：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
2. 尺寸用 em：按钮是 btn-md 就设 width: 1.5em; height: 1.5em;；btn-sm 用 1.2em；别写死 px 或用 scale()
3. 同步调 border-width：放大到 4em 时，border-width: 0.5rem 才不虚边

文字显隐必须用 display: none + 同步 disabled

只靠 visibility: hidden 或 opacity: 0，按钮宽度会突变，导致布局抖动；不设 disabled，键盘用户仍能回车触发。

1. 把原按钮文字包进 <span>，加载时执行：spanEl.style.display = 'none'; buttonEl.disabled = true;
2. spinner 元素本身必须加 aria-hidden="true"，否则读屏器重复读 “Loading”
3. 恢复时别只还原文字，要同时清除 disabled、移除 spinner 节点、清空 aria-busy

自定义 @keyframes 动画必须显式挂载

写了 @keyframes spin 却不动？Bootstrap 的 .spinner-border 类压根没声明 animation，浏览器根本不会播。

1. 必须手动加规则，例如：.spinner-border.custom-spin { animation: spin 0.75s linear infinite; }
2. 选择器权重得够：写成 button .spinner-border.custom-spin 或加 !important（慎用）
3. transform-origin: center 必须显式设，否则旋转中心偏移，尤其在小按钮里明显
4. 别用 scale() 缩放整个 spinner 元素——会导致点击热区偏移、边框抗锯齿失真

真正卡住人的从来不是怎么写动画，而是 disabled 没同步、文字节点没清理、spinner 尺寸没随按钮字号缩放——这三处漏掉任一，加载态就变成 UI bug。