如何停止Bootstrap 4旋转器动画并显示静态图标？

Bootstrap 4的spinner旋转效果是由.spinner-border类内置的spinner-border动画实现的，要停止动画且不隐藏元素，只需要禁用这个动画即可，下面是两种简单的实现方式：

方法一：自定义CSS类控制动画 #

1. 先添加一段自定义CSS，用来覆盖spinner的旋转动画：

.spinner-static {
  animation: none !important;
}

2. 当需要停止旋转时，给spinner元素添加这个类：

// 注意：你的原代码里getElementById的参数少了闭合引号，修正后是下面这样
document.getElementById('spinner').classList.add('spinner-static');

如果之后需要恢复旋转，移除这个类就行：

document.getElementById('spinner').classList.remove('spinner-static');

方法二：直接通过JS修改元素样式 #

不需要额外写CSS，直接通过JS设置元素的animation属性为none：

document.getElementById('spinner').style.animation = 'none';

要恢复旋转的话，清空这个样式属性：

document.getElementById('spinner').style.animation = '';

另外提一句：原代码中document.getElementById('spinner)存在语法错误，缺少了闭合的单引号，记得修正，否则会导致JS报错无法执行。

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