旋转特效

使用Bootstrap的旋转特效来显示组件或页面的加载状态，该特效完全使用HTML、CSS构建，并没有使用JavaScript。

本页导航↓

关于旋转特效

Bootstrap 中的 “spinners” 可用于显示项目中的加载状态。它们只使用HTML和CSS构建，这意味着您不需要任何JavaScript来创建它们。但是，您需要一些自定义JavaScript来切换它们的可见性。它们的外观、排列和尺寸都可以通过我们自定义的代码来轻松定制。

为了便于访问，这里的每个加载程序都包含 role="status" 和嵌套的 <span class="visually-hidden">Loading...</span>。

此组件的动画效果依赖于 prefers-reduced-motion 媒体查询。请参阅我们的可访问的文档的motion部分。

旋转器的边框

旋转器的边框可用于轻量的加载显示。

<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>

旋转器的颜色

旋转体的边框会使用 currentColor 作为边框颜色，这意味着您可以使用文本颜色工具自定义颜色。您可以在旋转器上使用我们的任何文本颜色实用工具。

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

为什么不使用边框颜色工具呢?每个旋转体至少有一个边是一个透明边框，因此 .border-{color} 这个实用工具将会覆盖这个边框。

渐变加载

如果您不喜欢旋转器，请切换到渐变加载。虽然从技术上讲它并不是旋转的，但是它是反复增长的！

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

同样，这个加载特效的颜色也是由 currentColor 属性决定的，因此您可以使用文本颜色工具轻松地更改其外观。这里是蓝色的，并且它也可以支持的各种的颜色变化。

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

对齐方式

在Bootstrap中，旋转特效是由 rem， currentColor 和 display: inline-flex 所构建的。这就意味着可以很方便的调整大小，重新着色并快速对齐。

边距工具

使用边距工具，利用像.m-5 的工具可以轻松实现布局边距

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

旋转器的定位

你在任何情况下，都可以使用flexbox 工具,浮动工具或者文本对齐工具来将旋转器精确地放置在任何需要它们的位置

弹性布局

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

Loading...

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

浮动布局

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

文本对齐

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

旋转器的大小

添加 .spinner-border-sm 和 .spinner-grow-sm 就可以来使得一个可以在其他组件中可以快速使用的更小旋转器。

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

或者，你也可以使用自定义CSS或内联样式来根据需要更改旋转器的大小。

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

旋转器的按钮

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

<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">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="visually-hidden">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>