旋转特效(Spinners)

基于纯CSS旋转特效类（.spinner-border)，用于指示控件或页面的加载状态。

关于

.spinner-border旋转特效类可用于显示项目的加载状态，基于纯CSS构建，不依赖JavaScript，更加轻量。同时可配合JS脚本来订制或切换它们的可见性,整个特效的外观、对齐方式和大小可以很容易地使用，基于Boostrarp的变量进行自由订制、引用。

圆形旋转

使用不间断的旋转特效，作为轻量级加载指示器。

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

颜色定义

旋转特效控件基于CSS的currentColor 属性继承 border-color, 即可用文本颜色工具自定义颜色. 你可以在标准旋转器上使用任何文本颜色实用程序。

<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中的旋转器是用 rems, currentColor, 和 display: inline-flex。这意味着它们可以很容易地调整大小、重新着色和快速对齐。

边距

用边距设置，如 .m-5更简单。

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

位置

用 flexbox utilities, float utilities, 或者 text alignment设置在任何情况下可以将旋转器准确地放置在你需要它们的地方。

弹性

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

浮动

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

按钮类型

在按钮中使用旋转器指示当前正在处理或正在进行的操作。你还可以从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>