讀取圖標（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;
}
}