微调器
微调框-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>