微调器
微调框-Bootstrap 5和Material Design 2.0组件
使用完全由HTML构建的MDB微调器指示组件或页面的加载状态， CSS，没有JavaScript。
基本例子
将边框微调框用于轻型加载指示器。
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
MDB“旋转器”可用于显示项目中的加载状态。它们仅与 HTML和CSS，这意味着您不需要任何JavaScript即可创建它们。但是，您将需要 一些自定义JavaScript来切换其可见性。它们的外观，对齐方式和尺寸可以 借助我们惊人的实用程序类轻松进行自定义。
为了方便访问，此处的每个加载程序都包括
role="status" 和一个嵌套
<span class="visually-hidden">Loading...</span>.
色彩
边框微调器将 currentColor 用于其 border-color ，这意味着
您可以自定义颜色
文本颜色实用程序。您可以使用任何
我们在标准微调器上的文本颜色实用程序。
<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 实用程序？：
每个边框微调器为至少一侧指定一个 transparent 边框，因此
.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 s， currentColor 和
显示：inline-flex 。这意味着它们可以轻松地调整大小，重新着色和
快速对齐。
保证金
Use 保证金工具 喜欢
.m-5 ，便于分隔。
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
柔性
采用 flexbox实用程序, 浮动工具, or 文字对齐 可以在任何情况下将微调器精确地放置在所需位置的实用程序。
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Floats
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Text align
<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>