问：

我正在使用 bootstrap 4。当事件开始时，我可以使用以下命令让微调器旋转：

<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>

document.getElementById('spinner).style.display = 'inline-block';

但是我该如何阻止它旋转呢？我不想隐藏微调器，因为我想显示静态图像。有什么办法可以做到吗？

javascript html css 引导-4

溶液

解决方案非常简单。您所要做的就是设置为：animationnone

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

演示

下面是一个代码片段来演示它。微调器将在运行后停止。2s

// Get the spinner element
var spinner = document.getElementById('spinner');

// Show the spinner
spinner.style.display = 'inline-block';

// Set a timeout of 2 seconds
setTimeout(function() {
  // Stop the spinner animation
  spinner.style.animation = 'none';
}, 2000);

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">



<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>





<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script>

编辑

编辑#1：整个圆圈显示

正如我在评论中所说，微调器首先不是完整的循环。因此，一个迂回的方法是，当必须停止微调器时，将类人更改为图标，以便显示请求的图标。FontAwesome

为此，首先包括 cdn：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

在 font awesome 6 中，圆圈图标是，所以我们用 JS 替换了微调器的电流。<i class="fa-regular fa-circle"></i>className'fa-regular fa-circle'

document.getElementById('spinner').className = "fa-regular fa-circle";

演示

在演示中，微调器将在运行后停止并更改图标（我已按类将图标更改为绿色 - 但您可以使用任何您想要的东西，过程是相同的）。2schecktext-success

编辑#2：处理动画的更好方法

根据yes的评论，另一个解决方案更复杂，但我认为不想重新启动动画，因为他要求在旋转结束时将图标更改为完整的圆圈。不过，如果他们确实愿意，那么我还建议使用停止和重新启动微调器，其中 stops 的值和的值开始动画。@Yogi@user1753640spinner.style.animationIterationCount0Infinite

停止 Bootstrap 微调器以使其静止而不旋转

Stop Bootstrap spinner to make it static and not spin

评论

溶液

演示

编辑

编辑#1：整个圆圈显示

演示

编辑#2：处理动画的更好方法

评论