直接改 animation-duration 不生效，因 bootstrap 5 的 spinner 动画由 @keyframes 驱动且需完整重写 animation 声明（如 .spinner-border { animation: spinner-border 0.4s linear infinite; }），而非仅修改单个属性。
直接改 animation-duration 不生效？先确认类名和动画源
Bootstrap 5 的 spinner-border 和 spinner-grow 动画由 CSS @keyframes 驱动，不是 JS 控制的——但你不能只改元素上的 animation-duration 就完事。因为 Bootstrap 的动画规则写在 .spinner-border 和 .spinner-grow 类里，且依赖预设的 @keyframes spinner-border / spinner-grow。直接在 HTML 里写 style="animation-duration: 0.4s" 很可能被原生样式覆盖。
必须用更高优先级的选择器重写整个 animation 声明：
-
.spinner-border默认用的是animation: spinner-border 0.75s linear infinite -
.spinner-grow默认是animation: spinner-grow 0.75s linear infinite - 所以你要覆盖的不是单个属性，而是整条
animation值，否则0.75s还在起作用
怎么安全覆盖旋转速度（推荐写法）
在自定义 CSS 文件中（确保它在 Bootstrap CSS 之后加载），写：
.spinner-border {
animation: spinner-border 0.4s linear infinite;
}
.spinner-grow {
animation: spinner-grow 0.4s linear infinite;
}
注意三点：
- 必须重复写出完整的
animation值，包括动画名、时长、timing-function、iteration-count；漏掉infinite会导致转一下就停 - 别用
!important——用更具体的选择器即可，比如.btn .spinner-border或.my-loading .spinner-border - 如果同时改多个尺寸（如
.spinner-border-sm），也要单独覆盖：.spinner-border-sm { animation: spinner-border 0.4s linear infinite; }
改太快或太慢会出什么问题？
视觉识别阈值和性能要兼顾。0.75s 是 Bootstrap 经过权衡的默认值，不是随便定的：
- 低于
0.3s：人眼来不及捕捉旋转方向，尤其对色弱用户，spinner-border容易被当成静态图标 - 高于
1.2s：用户会误判为卡死或失败，尤其在按钮内嵌场景下，交互反馈延迟感明显 - 动画时长 ≠ 请求耗时。如果你后端响应普遍在 800ms，那 spinner 设成
0.8s反而比0.4s更可信——它暗示“还没好”，而不是“刚启动就结束了” - GPU 加速没开？加
transform: translateZ(0)到 spinner 元素上可强制启用，避免低端安卓机掉帧
为什么改了 CSS 还是没变快？检查这几个地方
常见失效原因不是代码写错，而是上下文干扰：
- 浏览器 DevTools 里看到新样式被划掉？说明你的 CSS 文件加载顺序错了，或者选择器权重不够（比如只写了
.spinner-border，但 Bootstrap 用了.spinner-border, .spinner-grow同时声明，权重一样时后加载者胜出） - 用的是 Bootstrap 4？它的 spinner 是手写的 border 动画，没有
@keyframes，得改@keyframes spinner-border定义本身，且类名是.spinner-border而非.spinner-border（Bootstrap 4.2+ 才引入） - 在按钮里用 spinner，但按钮本身有
transition: all 0.15s？这个会干扰 spinner 的 transform 动画，导致卡顿或跳变，建议给 spinner 单独加transition: none - 用了第三方 UI 库（如 BootstrapBlazor 或 Blazored.Modal）？它们可能封装了自己的 spinner 组件，CSS 覆盖无效，得查对应库的文档看是否暴露
animation-speed参数
最稳的办法永远是：打开浏览器开发者工具，选中 spinner 元素，看 computed 标签下 animation 最终解析值是多少——它不会说谎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
