如何创建 Bootstrap Spinner 并在屏幕上显示，直到来自 API 的数据加载？

Bootstrap Spinner 是一种加载指示器，用于在网页上展示数据加载的进度。在使用 API 请求数据时，经常会遇到需要等待数据加载的情况。为了提高用户体验，我们可以使用 Bootstrap Spinner 来展示数据加载的进度。

步骤

1. 引入 Bootstrap 和相关依赖

在 HTML 文件中引入 Bootstrap 和相关依赖文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. 创建 Spinner HTML 元素

使用 Bootstrap Spinners，我们可以轻松地创建一个占据整个页面的加载指示器。可以在 HTML 文件的 BODY 标签中添加以下代码来创建一个 Spinner：

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

3. 添加样式

添加以下 CSS 样式来设置 Spinner 元素在屏幕中居中：

.spinner-border {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用 jQuery 加载数据并隐藏 Spinner

添加以下 JavaScript 代码来使用 jQuery 发起 API 请求，并在数据加载完成后隐藏 Spinner：

$(document).ready(function() {
  // 显示 Spinner
  $('.spinner-border').show();
  
  // 发起 API 请求
  $.ajax({
    url: '/api/data',
    type: 'GET',
    success: function(data) {
      // 数据加载完成后隐藏 Spinner
      $('.spinner-border').hide();
      
      // 处理 API 返回的数据
    },
    error: function(xhr, status, error) {
      // 处理 API 错误
    }
  });
});

结论

Bootstrap Spinners 为 Web 开发提供了一个轻量级的方式来展示数据加载进度。在使用 API 请求数据时，我们可以使用 Bootstrap Spinners 来展示加载进度，并且使用 jQuery 在数据加载完成后隐藏 Spinner，提高用户体验。