笙亿网络策划

Bootstrap 加载 Spinner 怎么用？

约 37 分钟读完 0 阅
文章导读
Previous Quiz Next 本章将讨论 Bootstrap 加载指示器。Bootstrap 通过 .spinner class 来显示项目的加载状态。
📋 目录
  1. A 工作原理
  2. B 边框加载指示器
  3. C 颜色
  4. D 增长式加载指示器
  5. E 对齐
  6. F 外边距
  7. G 位置
  8. H Flex
  9. I Float
  10. J 文本对齐
A A

Bootstrap - 加载指示器

Previous
Quiz
Next

本章将讨论 Bootstrap 加载指示器。Bootstrap 通过 .spinner class 来显示项目的加载状态。

工作原理

  • Bootstrap 加载指示器使用 HTML 和 CSS 显示项目的加载状态。构建它们不需要 JavaScript。

  • 需要自定义 JavaScript 来切换它们的可见性。外观、对齐方式和尺寸可以通过 Bootstrap 的 utility classes 轻松自定义。

  • 每个加载指示器都有 role="status" 和一个嵌套的 <span class="visually-hidden">Loading... </span >，以提高可访问性。

边框加载指示器

使用 .spinner-border class 创建轻量级的加载指示器。

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Border Spinner</h3>
      <div class="spinner-border mt-2" role="status">
        <span class="spinner-grow text-white spinner-grow-sm" role="status"></span>
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

颜色

边框加载指示器使用 currentColor 作为其 border-color，可以通过文本颜色 utility 来自定义。在标准加载指示器上使用文本颜色 utility。

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Colored Spinner</h3>
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>
为什么不使用 border-color utility？边框加载指示器在一侧有 transparent 边框，会被 .border-{color} utility 覆盖。

增长式加载指示器

  • 您可以将加载指示器的旋转类型更改为增长式加载指示器。它实际上并不旋转，而是反复增长。

  • 使用 .spinner-grow class 创建增长式加载指示器。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing Spinner</h3>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

此加载指示器使用 currentColor 与文本颜色工具类一起改变其外观。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing color Spinners</h3>
      <div class="spinner-grow text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

对齐

Bootstrap 加载指示器使用 rem、currentColor 和 display: inline-flex 设计。它们易于调整大小、更改颜色并对齐。

外边距

对于简单的间距，使用 .m-4 等 margin 工具类。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Margin</h3>
      <div class="spinner-border m-4" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

位置

Bootstrap spinners 可以使用 flexbox 工具类、float 工具类或文本对齐工具类来定位。

Flex

使用 flexbox 定位类来设置 spinners 的位置。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Flex placement at start, center, end</h5>
      <div class="d-flex justify-content-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

您可以使用 flexbox 定位来改变 spinner 的对齐方式。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="d-flex align-items-end mt-2">
        <h5 class="text-center">Flex placement</h5>
        <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
      </div>
    </body>
    </html>

Float

使用 float 定位 class 来设置 spinner 的位置。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5>Float placement at start and end</h5>
      <div class="clearfix float-start mt-2">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>

      <div class="clearfix float-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

文本对齐

使用 .text-align 定位 class 来设置 spinner 元素的位置。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Text Align at start, center, end</h5>
      <div class="text-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

尺寸

Spinner 尺寸可用于创建各种尺寸的 Spinner。

  • 对于小尺寸 Spinner，使用 .spinner-border-sm 和 .spinner-grow-sm 类。

  • 对于中等尺寸 Spinner，使用 .spinner-border-md 和 .spinner-grow-md 类。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Small Size Spinner</h5>
      <div class="spinner-border spinner-border-sm text" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-sm" role="status">
        <span class="visually-hidden"></span>
      </div>
      <h5 class="mt-2">Medium Size Spinner</h5>
      <div class="spinner-border spinner-border-md" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-md" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

如需按要求修改尺寸，请使用自定义 CSS 或内联样式。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner using custom CSS</h5>
      <div class="spinner-border" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

按钮

  • Button spinners 用于显示当前正在处理的操作。如有需要，可以将 spinner 元素文本替换为按钮文本。

  • 使用 .btn 和 .spinner-border class 来创建 spinner 按钮。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden"></span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Wait...
      </button>
    </body>
    </html>

使用 .btn 和 .spinner-grow class 来创建 growing spinner 按钮。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Growing Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden">Wait...</span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
       Wait...
      </button>
    </body>
    </html>