微调器(Spinners)

使用完全由HTML,CSS而不使用JavaScript构建的Bootstrap微调器(Spinners)指示组件或页面的加载状态。

关于

引导程序“ spinners”可用于显示项目中的加载状态。 它们仅使用HTML和CSS构建,这意味着您不需要任何JavaScript即可创建它们。 但是,您将需要一些自定义JavaScript来切换其可见性。 它们的外观,对齐方式和大小可以通过我们惊人的实用程序类轻松进行自定义。

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

边框微调框

将边框微调框用于轻型加载指示器。

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

颜色

边框微调器将“ currentColor”用作其“ border-color”,这意味着您可以使用文本颜色工具自定义颜色。 您可以在标准微调器上使用我们的任何文本颜色工具。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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>

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.

增长微调器

如果您不喜欢边框微调器,请切换到增长微调器。 尽管从技术上讲它不是旋转的,但确实会反复增长!

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

同样,此微调器是使用currentColor构建的,因此您可以使用文本颜色工具轻松更改其外观。 它以蓝色显示,以及受支持的变体。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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中的微调器由rems,currentColordisplay:inline-flex组成。 这意味着它们可以轻松地调整大小,重新着色并快速对齐。

Margin

Use margin utilities like .m-5 for easy spacing.

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

放置(Placement)

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

悬浮(Flex)

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

浮动(Floats)

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

文本对齐

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

尺寸(Size)

添加.spinner-border-sm.spinner-grow-sm可以制作一个较小的微调器,可以在其他组件中快速使用。

Loading...
Loading...
<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或内联样式来根据需要更改尺寸。

Loading...
Loading...
<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>

按钮(Buttons)

使用按钮内的微调器指示当前正在处理或正在进行的动作。 您也可以将文本换出spinner元素,并根据需要使用按钮文本。

<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>