如何创建 Bootstrap 旋转控件并显示在屏幕上，直到 API 数据加载完毕?

bootstrapweb developmentfront end technology

我们将使用 Bootstrap 创建一个 Bootstrap 旋转控件，并将其显示在屏幕上，直到 API 数据加载完毕。这将让用户直观地了解后台正在运行，是提升用户体验的绝佳方法。在本博客中，我们将使用著名的前端编程框架 Bootstrap。

按照以下步骤创建 Bootstrap 旋转控件并显示在屏幕上，直到 API 数据加载完毕 -

步骤 1:导入 Bootstrap CSS 和 JavaScript 文件

我们将从第一步开始，在 index.html 文件中导入 JavaScript 文件 (jQuery.min.js) 和 CSS 文件 (bootstrap.min.css)。要使用的链接和脚本标签如下所示。请将这些代码行复制并粘贴到 HTML 文件的 head 部分。

<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:创建 Spinner 元素

现在进入下一步，即在 index.html 文件的 body 部分添加一个 div 元素。我们将提供一个类名为"text-center"，id 为 spinner。我们还将使用一个"i"标签，其中包含 spinner 的 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:默认隐藏 spinner

创建 spinner 的第三步是默认隐藏 spinner。我们不希望 spinner 一直可见。仅当使用 API 加载数据时，旋转器才必须可见。

为此，我们将使用 id 选择器并赋予其 display:none 属性。

#spinner {
   display: none;
}

步骤 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 方法。

个性化旋转器

成功创建旋转器并使其完全正常运行后，我们可以使用 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 文件中来结束讨论。