极客教程Bootstrap 如何创建一个旋转器并显示在屏幕上，直到来自API的数据加载
使用Bootstrap，我们将创建一个Bootstrap旋转器并显示在屏幕上，直到来自API的数据被加载。这将给客户提供视觉上的指示，告诉他们后台正在发生的事情，这也是改善用户体验的一个好方法。在这个博客中，我们将利用Bootstrap，一个著名的前端编程框架。
按照下面的步骤，创建一个Bootstrap旋转器，并在屏幕上显示，直到来自API的数据加载完毕 –
第1步：包括Bootstrap的CSS和JavaScript文件
我们将从第1步开始，在index.html文件中导入JavaScript（jQuery.min.js）和CSS文件（bootstrap.min.css）文件。要使用的链接和脚本标签写在下面。请将这几行代码复制并粘贴到你的HTML文件的头部部分。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
第2步：创建旋转器元素
现在是我们的下一步，即在index.html文件的主体部分添加一个div元素。我们将提供一个 “text-center “类，id为spinner。我们将使用一个 “i “标签，该标签将拥有用于旋转器的bootstrap类，即fa、fa-spinner、fa-spin和fa-3x。我们在这里使用四个类只是为了保证页面的响应性。
<div class="text-center" id="spinner">
<i class="fa fa-spinner fa-spin fa-3x"></i>
</div>
第3步：默认隐藏喷丝板
我们创建微调器的第3步是，使微调器默认隐藏。我们不希望喷丝板一直是可见的。只有当数据通过API加载时，才可以看到喷丝板。
为了做到这一点，我们将使用id选择器，并给它一个属性display:none。
#spinner {
display: none;
}
第4步：在数据被加载时显示喷丝板
我们的第4步是显示旋转器，直到数据被加载。我们将简单地使用一个叫做show()的函数来做这件事。
$("#spinner").show();
第5步：当数据被加载时，隐藏旋转器
我们的下一步是在数据被完全加载后隐藏喷丝板。我们将简单地使用一个叫做hide()的函数来做这件事。
$("#spinner").hide();
第6步：调用API并显示喷丝板
在这一步，我们将整合以上三个步骤，生成一个旋转器，在加载数据时显示旋转器，一旦数据加载完毕，它将自动隐藏。
$.ajax({
url: "api_url",
method: "GET",
beforeSend: function() {
$("#spinner").show();
},
success: function(data) {
// do something with the data
},
complete: function() {
$("#spinner").hide();
}
});
在提交对所提供的API网址的GET调用时，在请求提交前显示旋转器，然后在请求被交付后被删除。由API提供的数据应该在成功方法中处理，例如，在屏幕上显示。
注意 - 要联系API并显示旋转器，你也可以使用javascript的Fetch API方法而不是$.ajax方法。
定制Spinner
在成功地创建了旋转器并使其完全发挥作用之后。我们可以通过使用font Awesome库来定制它，该库可用于生成本教程中的旋转符号。我们还可以修改旋转器的图标、大小、颜色和其他CSS属性。
要调整旋转器的大小，只需将 “fa-3x “类改为 “fa-4x “或 “fa-5x”。我们还可以通过给I元素添加一个新的类并在CSS文件中声明来改变旋转器的颜色。
现在，让我们在下面的index.html文件中结合我们所有的工作。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Spinner Tutorial</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
#spinner {
position: absolute;
top: 50%;
left: 50%;
width: 3.5rem;
height: 3.5rem;
/* transform: translate(-50%, -50%); */
display: none;
}
</style>
</head>
<body>
<div class="spinner-border m-5" role="status" id="spinner">
<span class="visually-hidden">Loading...</span>
</div>
<div id="dataContainer"></div>
<script>
function getData() {
var spinner = document.getElementById("spinner");
spinner.style.display = "block";
setTimeout(function () {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => {
data.forEach((item) => {
var div = document.createElement("div");
var p = document.createElement("p");
p.innerText = item.title;
div.appendChild(p);
document.getElementById("dataContainer").appendChild(div);
});
spinner.style.display = "none";
});
}, 5000);
}
getData();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script>
</body>
</html>
在本教程中，我们首先介绍了在索引文件中添加必要的文件，即js和css。然后，我们使用bootstrap库创建了旋转器，并使用jquery库使其发挥作用。我们还讨论了使用font awesome库定制旋转器的问题。最后，我们把所有的代码放在index.html文件中，结束了我们的讨论。