bootstrap 4 不支持 .spinner-border 类，需用纯 css 自建旋转器：调 border 宽度控粗细，重写整条 animation 声明控转速，并注意 ie11/safari 兼容性细节。
Bootstrap 4 里没有 .spinner-border 类，别直接套用 Bootstrap 5 的写法
Bootstrap 4 官方不提供 Spinners 组件（.spinner-border 和 .spinner-grow 是 4.2+ 才实验性引入、5.0 才正式支持的）。如果你在 Bootstrap 4 项目里看到这些类生效，大概率是手动引入了 Bootstrap 5 的 CSS，或混用了 CDN。直接照搬 Bootstrap 5 的定制方式（比如改 animation-duration）会失效——因为动画名、关键帧定义、默认尺寸都不一致。
正确路径是：用纯 CSS 自建旋转器，再按需控制粗细和转速。
改粗细：调 border 宽度，不是改 font-size 或 scale()
常见错误是试图用 transform: scale(0.8) 缩小整个 spinner，结果边框变虚、旋转中心偏移、高 DPI 屏幕下模糊。Bootstrap 4 场景下最稳的方式是直接操作边框本身：
-
border的宽度决定“环”的粗细，例如border: 0.3em solid currentColor比默认0.25em更粗 - 若只想要顶部一截动，必须保留
border-top单独设色，且border-top-width要和其它三边一致，否则圆环断裂 - 别用奇数像素值（如
3px），尤其在缩放或 subpixel 渲染场景下易抖动；推荐用em或偶数px（如4px） - 如果粗细变化后旋转中心偏了，补一句
transform-origin: center，不然它可能绕左上角转
改转速：重写整条 animation 声明，不能只改 animation-duration
你写 style="animation-duration: 0.4s" 不起作用，是因为原始样式里 animation 是一条完整声明：animation: spin 0.75s linear infinite。单改一个属性会被覆盖。
必须在自定义 CSS 中（确保加载顺序在 Bootstrap 4 CSS 之后）重写整条规则：
.my-spinner {
animation: spin 0.4s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
注意三点：
- 必须重复写出
spin（动画名）、0.4s（时长）、linear（速度曲线）、infinite（循环）——漏掉任一都会出问题 - 低于
0.3s人眼难识别方向，尤其对色弱用户；高于1.2s易被当成卡死；建议区间为0.4s–0.8s，与后端平均响应时间对齐更可信 - 如果 spinner 嵌在按钮里，还要同步调整
width/height，避免因转速加快导致视觉节奏失衡
容易被忽略的兼容性细节
Bootstrap 4 常跑在较老浏览器上（IE11、旧版 Safari），这些地方最容易翻车：
- 别用
rotateZ()，部分 Safari 9–12 对 Z 轴支持不稳定，统一用rotate() - IE11 不支持
will-change: transform，但加了也无害；真正要加的是transform: translateZ(0)来强制 GPU 加速 - 伪元素（
::after）做 spinner 时，必须写content: ""，否则不渲染——这个在 IE11 和 Android 4.4 WebView 里极容易漏 - 如果用
em单位设宽高，确保父元素font-size稳定；按钮内嵌时优先用rem或固定px避免级联干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
