bootstrap 5 中 spinner-border 和 spinner-grow 无 lg 尺寸类，仅支持 spinner-*-sm；大尺寸需手动设置 width/height 及匹配的 border-width，避免仅缩放导致动画失真或错位。
Bootstrap 5 中 spinner-border 和 spinner-grow 的尺寸控制方式
Bootstrap 5 原生不提供 sm / lg 这类尺寸修饰类来直接缩放加载动画，但提供了明确的尺寸类： spinner-border-sm 和 spinner-grow-sm —— 注意，没有 spinner-border-lg。大尺寸需手动调整 width 和 height。
常见错误是试图写 <div class="spinner-border spinner-border-lg">，这不会生效，因为 Bootstrap CSS 中未定义该类。
<ul>
<li>
<code>spinner-border-sm 对应 width: 1rem; height: 1rem;（约 16px）
spinner-border 是 width: 2rem; height: 2rem;（约 32px）<div class="spinner-border" style="width: 3rem; height: 3rem;">
<li>响应式场景下，避免用 <code>vw 或百分比设尺寸——border 动画依赖固定宽高比，缩放易导致旋转错位自定义尺寸时如何保持动画比例和居中对齐
加载动画本质是两个伪元素（::before 和 ::after）绕中心旋转。一旦修改 width/height，必须同步确保 border 宽度按比例缩放，否则出现“细线抖动”或“粗块卡顿”。
例如将尺寸放大到 4rem，建议同时设 border-width: 0.25rem（默认是 0.25rem 对应 2rem 尺寸，所以 4rem 时宜用 0.375rem 或 0.5rem）：
<div class="spinner-border" style="width: 4rem; height: 4rem; border-width: 0.5rem;"></div>
- 只改
width/height而不调border-width，动画会变虚、边缘模糊 - 用
transform: scale()强行缩放整个元素——会导致父容器布局塌陷、点击区域错位，不推荐 - 居中时优先用
text-center（行内元素）或d-flex justify-content-center align-items-center（块级容器），避免仅靠margin: auto
在按钮内嵌 Loading 状态时的尺寸适配技巧
按钮里的加载动画必须和按钮文字大小、行高、内边距协调。直接套用 spinner-border-sm 在 btn-sm 里刚好；但在 btn-lg 里就显得太小。
- 对
btn-lg，建议用spinner-border+ 内联尺寸：style="width: 1.5rem; height: 1.5rem; border-width: 0.1875rem;" - 为避免重复写样式，可抽成工具类，如：
.spinner-btn-lg { width: 1.5rem; height: 1.5rem; border-width: 0.1875rem; } - 禁用按钮状态（
disabled）下，加载动画默认会变灰，若需保持原色，加disabled="false"并用 JS 控制视觉态，而非依赖原生 disabled 样式 - 切勿把
spinner放进btn的padding区域外——会导致点击热区偏移，应始终包裹在按钮内容流内
IE11 兼容性下 Spinner 的降级处理
Bootstrap 5 的 spinner-border 依赖 @keyframes 和 transform: rotate()，IE11 虽支持基础旋转，但存在帧率低、伪元素渲染异常的问题，尤其在小尺寸（sm）下容易消失。
- 检测 IE11 可用
document.documentMode，然后动态替换为 GIF 加载图：<img src="loading.gif" alt="loading" style="max-width:90%" style="max-width:90%"> - 不要用
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)模拟旋转——性能差且无法形成连续动画 - 若项目强制要求 IE11 支持，建议放弃原生 spinner，统一用 SVG + SMIL 或轻量 JS 动画库（如
spin.js） - Bootstrap 官方已明确不支持 IE11，所以任何修复都是临时方案，上线前务必真机测试
border-width 与尺寸的匹配关系——它不像字体大小那样有自然缩放逻辑，必须手动平衡。另外，很多人以为加个 animate__animated（Animate.css）就能增强效果，结果反而破坏了原生 spinner 的关键帧节奏，得不偿失。
