旋转特效(Spinners)

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

    圆形旋转

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

    旋转特效控件基于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. </div>
    21. <div class="spinner-border text-dark" role="status">
    22.   <span class="sr-only">Loading...</span>
    23. </div>

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

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

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

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

    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

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

    弹性

    1.   <div class="spinner-border" role="status">
    3.   </div>
    4. </div>
    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>

    对齐方向

    加上 .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或内联样式更改维度

    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元素中交换文本，并根据需要使用按钮文本。

    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. </button>

    旋转特效(Spinners) - 图13