如何控制并减慢Bootstrap grow spinner加载动画的运行速度

可以通过覆盖原生CSS的动画时长属性实现调慢效果，具体操作如下：

• 原理说明：Bootstrap 内置的 grow spinner 动画默认绑定了spinner-grow关键帧，默认动画时长为0.75s，只需修改animation-duration属性值即可调整速度，属性值越大，动画速度越慢。
• 方案1：全局自定义类复用（推荐）
  首先在你的自定义样式文件中添加自定义类：

  /* 自定义慢速度grow spinner，1.5s可按需调整 */
  .spinner-grow.slow {
    animation-duration: 1.5s;
  }
  

  使用时直接给spinner元素添加slow类即可：

  <div class="spinner-grow text-primary slow" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  

• 方案2：单个元素内联样式调整
  如果只需要调整单个spinner的速度，直接添加内联样式即可，无需额外写CSS：

  <div class="spinner-grow text-primary" style="animation-duration: 2s;" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  

注意：无需修改Bootstrap原生源码，自定义样式只要优先级高于Bootstrap默认样式即可生效，建议自定义样式引入顺序放在Bootstrap样式之后。

内容的提问来源于stack exchange，提问作者N4N4rd