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>