旋转特效(Spinners)

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

关于

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

圆形旋转

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

旋转特效(Spinners) - 图1

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

颜色定义

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

旋转特效(Spinners) - 图2

  1. <div class="spinner-border text-primary" role="status">
  2.   <span class="sr-only">Loading...</span>
  3. </div>
  4. <div class="spinner-border text-secondary" role="status">
  5.   <span class="sr-only">Loading...</span>
  6. </div>
  7. <div class="spinner-border text-success" role="status">
  8.   <span class="sr-only">Loading...</span>
  9. </div>
  10. <div class="spinner-border text-danger" role="status">
  11.   <span class="sr-only">Loading...</span>
  12. </div>
  13. <div class="spinner-border text-warning" role="status">
  14.   <span class="sr-only">Loading...</span>
  15. </div>
  16. <div class="spinner-border text-info" role="status">
  17.   <span class="sr-only">Loading...</span>
  18. </div>
  19. <div class="spinner-border text-light" role="status">
  20.   <span class="sr-only">Loading...</span>
  21. </div>
  22. <div class="spinner-border text-dark" role="status">
  23.   <span class="sr-only">Loading...</span>
  24. </div>

为何不用border-color 工具? 因为每个旋转特效组件的至少有一个边框都被定义了 transparent 边界, 因此 .border-{color} 会覆盖它造成错误显示.

渐变缩放

如果你不喜圆形旋转特效，可以切换到“渐变缩放”效果，即从小到大的缩放冒泡特效（译者注：类似zico图标库的缩放效果)。

旋转特效(Spinners) - 图3

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

激变缩放也是基于 currentColor继承颜色的，故可使用文本颜色工具来定义颜色，从基础蓝色到更多颜色。

旋转特效(Spinners) - 图4

  1. <div class="spinner-grow text-primary" role="status">
  2.   <span class="sr-only">Loading...</span>
  3. </div>
  4. <div class="spinner-grow text-secondary" role="status">
  5.   <span class="sr-only">Loading...</span>
  6. </div>
  7. <div class="spinner-grow text-success" role="status">
  8.   <span class="sr-only">Loading...</span>
  9. </div>
  10. <div class="spinner-grow text-danger" role="status">
  11.   <span class="sr-only">Loading...</span>
  12. </div>
  13. <div class="spinner-grow text-warning" role="status">
  14.   <span class="sr-only">Loading...</span>
  15. </div>
  16. <div class="spinner-grow text-info" role="status">
  17.   <span class="sr-only">Loading...</span>
  18. </div>
  19. <div class="spinner-grow text-light" role="status">
  20.   <span class="sr-only">Loading...</span>
  21. </div>
  22. <div class="spinner-grow text-dark" role="status">
  23.   <span class="sr-only">Loading...</span>
  24. </div>

对准

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

边距

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

旋转特效(Spinners) - 图5

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

位置

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

弹性

旋转特效(Spinners) - 图6

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

旋转特效(Spinners) - 图7

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

浮动

旋转特效(Spinners) - 图8

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

对齐方向

旋转特效(Spinners) - 图9

  1. <div class="text-center">
  2.   <div class="spinner-border" role="status">
  3.     <span class="sr-only">Loading...</span>
  4.   </div>
  5. </div>

大小

加上 .spinner-border-sm 和 .spinner-grow-sm为了制作一个更小的转轮，可以快速地在其他组件中使用。

旋转特效(Spinners) - 图10

  1. <div class="spinner-border spinner-border-sm" role="status">
  2.   <span class="sr-only">Loading...</span>
  3. </div>
  4. <div class="spinner-grow spinner-grow-sm" role="status">
  5.   <span class="sr-only">Loading...</span>
  6. </div>

或者,根据需要使用自定义CSS或内联样式更改维度

旋转特效(Spinners) - 图11

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

按钮类型

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

旋转特效(Spinners) - 图12

  1. <button class="btn btn-primary" type="button" disabled>
  2.   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  3.   <span class="sr-only">Loading...</span>
  4. </button>
  5. <button class="btn btn-primary" type="button" disabled>
  6.   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  7.   Loading...
  8. </button>

旋转特效(Spinners) - 图13

  1. <button class="btn btn-primary" type="button" disabled>
  2.   <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  3.   <span class="sr-only">Loading...</span>
  4. </button>
  5. <button class="btn btn-primary" type="button" disabled>
  6.   <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  7.   Loading...
  8. </button>