读取图标（Spinners）

使用Bootstrap读取图标以表示元件加载状态，这些读取图标完全使用HTML，CSS，而没有使用到JavaScript。

On this page

关于

Bootstrap“读取图标（spinners）”可用于您的项目中来显示加载状态。它们仅使用HTML和CSS来建构，这意味着您不需要任何JavaScript来创建它。但您仍需要客制JavaScript来切换它们的显示状况。它们的外观、对齐以及尺寸都可以透过我们惊人的通用类别来自定义。

基于无障碍的目标，此处每个加载器都需要包含 role="status"和嵌套的 <span class="visually-hidden">Loading...</span>.

此组件的动画效果取决于“首选简化运动媒体”查询。请参阅我们的可访问性文档的简化运动部分。

边框读取图示

使用border读取图标来当作轻量的加载状态显示。

<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>

颜色

边框读取图标使用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通用类别呢？ 因为每个border读取图标都至少有一边是透明的，因此使用.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，currentColor和display: inline-flex。这意味着它们可以轻易地调整大小、颜色以及快速对齐。

边距

使用margin utilities像.m-5一样简单地增加间隔。

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

定位

使用flexbox通用类别、float通用类别，或是文字排版在任何情况下都可以将读取图标精确地放置在您需要的位置上。

Flex

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Loading... 
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

浮动

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

文本对齐

<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或inline来根据需要更改尺寸。

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

按钮

在按钮内使用读取图标是表示当前正在处理或正在进行操作。您也可以依照需求使用button text来更换读取图标的文字。

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">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="visually-hidden">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>

Sass

Variables

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Keyframes

Used for creating the CSS animations for our spinners. Included in scss/_spinners.scss.

@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}
返回顶部