Bootstrap spinner的常见用法有哪些

Bootstrap 是一个流行的前端框架，它提供了一系列预定义的样式和组件，用于快速构建网页

1. 按钮加载状态：当用户点击按钮时，可以在按钮内显示一个 spinner，表示正在处理请求。这可以提高用户体验，告知用户请求正在进行中。

  <
    span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
    <
    /span>
    
  加载中...
<
    /button>
    

1. 页面加载提示：在页面或部分区域显示一个 spinner，表示内容正在加载。这可以提高用户体验，避免用户在等待过程中感到困惑。

<
    div class="d-flex justify-content-center">
    
  <
    div class="spinner-border" role="status">
    
    <
    span class="sr-only">
    加载中...<
    /span>
    
  <
    /div>
    
<
    /div>

1. 自定义颜色和大小：通过修改 spinner 的 CSS 类，可以自定义其颜色和大小。例如，创建一个蓝色的、更大的 spinner：

  .custom-spinner {
    
    color: blue;
    
    width: 5rem;
    
    height: 5rem;

  }
    
<
    /style>
    

<
    div class="spinner-border custom-spinner" role="status">
    
  <
    span class="sr-only">
    加载中...<
    /span>
    
<
    /div>
    

1. 使用 Grow spinner：除了默认的 Border spinner，Bootstrap 还提供了一种 Grow spinner 效果。要使用 Grow spinner，只需将 spinner-border 类替换为 spinner-grow 类。

<
    div class="spinner-grow" role="status">
    
  <
    span class="sr-only">
    加载中...<
    /span>
    
<
    /div>

1. 结合 JavaScript 和 AJAX：在处理异步请求时，可以结合 JavaScript 和 AJAX 动态显示和隐藏 spinner。这样可以确保 spinner 仅在数据加载或处理时显示。

// 显示 spinner
function showSpinner() {
    
  document.getElementById("spinner").style.display = "block";

}


// 隐藏 spinner
function hideSpinner() {
    
  document.getElementById("spinner").style.display = "none";

}


// 发送 AJAX 请求
function fetchData() {
    
  showSpinner();
    
  fetch("/api/data")
    .then((response) =>
     response.json())
    .then((data) =>
 {
    
      // 处理数据
      hideSpinner();

    }
    )
    .catch((error) =>
 {
    
      // 处理错误
      hideSpinner();

    }
    );

}
    

这些常见用法展示了如何在不同场景下使用 Bootstrap spinner。根据实际需求，可以灵活地调整 spinner 的样式和行为。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！