旋转指示器

使用 Bootstrap 旋转指示器指示组件或页面的加载状态，这些旋转指示器完全由 HTML、CSS 构建，无需 JavaScript。

关于

Bootstrap “旋转指示器”可用于在您的项目中显示加载状态。它们仅使用 HTML 和 CSS 构建，这意味着您无需任何 JavaScript 即可创建它们。但是，您将需要一些自定义 JavaScript 来切换它们的可见性。它们的外观、对齐方式和大小可以使用我们出色的实用程序类轻松自定义。

出于可访问性目的，此处的每个加载器都包含 role="status" 和嵌套的 <span class="sr-only">Loading...</span>。

此组件的动画效果取决于 prefers-reduced-motion 媒体查询。请参阅我们的可访问性文档的减少运动部分。

边框旋转指示器

使用边框旋转指示器作为轻量级加载指示器。

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

颜色

边框旋转器为其 border-color 使用 currentColor，这意味着你可以使用文本颜色实用工具来自定义颜色。你可以在标准旋转器上使用我们任何的文本颜色实用工具。

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

为什么不使用 border-color 实用工具？每个边框旋转器至少为一侧指定一个 transparent 边框，因此 .border-{color} 实用工具将覆盖它。

增长旋转指示器

如果你不喜欢边框旋转器，请切换到增长旋转器。虽然它在技术上没有旋转，但它确实会重复增长！

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

同样，此旋转器是使用 currentColor 构建的，因此你可以使用文本颜色实用工具轻松更改其外观。以下是它的蓝色形式，以及支持的变体。

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

对齐

Bootstrap 中的旋转器使用 rem、currentColor 和 display: inline-flex 构建。这意味着它们可以轻松地调整大小、重新着色和快速对齐。

边距

使用边距实用工具，例如 .m-5，以轻松设置间距。

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

放置

使用 flexbox 实用工具、float 实用工具或文本对齐实用工具，将旋转器准确地放置在任何情况下你需要它们的位置。

Flex

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

加载中...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

浮动

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

文本对齐

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

大小

添加 .spinner-border-sm 和 .spinner-grow-sm 以制作一个较小的旋转器，该旋转器可以在其他组件中快速使用。

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

或者，根据需要使用自定义 CSS 或内联样式来更改尺寸。

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

按钮

在按钮中使用旋转器以指示当前正在处理或进行某个操作。你还可以将文本从旋转器元素中交换出来，并根据需要使用按钮文本。

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>