使用Bootstrap的讀取圖標(biāo)（spinners）可以在項(xiàng)目中展示加載狀態(tài)。這些圖標(biāo)僅使用HTML和CSS構(gòu)建，因此無(wú)需任何JavaScript即可創(chuàng)建。但是可能需要自定義JavaScript代碼來(lái)切換它們的顯示狀態(tài)。

通過(guò)Bootstrap提供的通用類別，可以輕松自定義這些圖標(biāo)的外觀、對(duì)齊和尺寸?；跓o(wú)障礙的目標(biāo)，此處每個(gè)加載器都需要包含 role=”status”和嵌套的 <span class=”visually-hidden”>Loading…</span>.

一、邊框讀取圖示

使用border讀取圖標(biāo)來(lái)當(dāng)作輕量的加載狀態(tài)顯示。

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

二、顏色

邊框讀取圖標(biāo)使用currentColor來(lái)當(dāng)作它的border-color，這代表你可以使用文字顏色通用類別來(lái)自定義它的顏色。你可以在標(biāo)準(zhǔn)的讀取圖標(biāo)上使用任何通用類別中的顏色。

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

因?yàn)槊總€(gè)border讀取圖標(biāo)都至少有一邊是透明的，因此使用.border-{color}通用類別會(huì)覆蓋它。

三、漸變讀取圖示

如果你不喜歡邊框讀取圖標(biāo)，可以切換到漸變讀取圖標(biāo)。雖然技術(shù)上來(lái)說(shuō)，它不會(huì)旋轉(zhuǎn)，但它會(huì)反復(fù)漸變顯示！

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

同上，這個(gè)讀取圖標(biāo)也使用currentColor，所以你可以輕易地使用文字顏色通用類別來(lái)改變它的外觀。這邊是藍(lán)色，以及它所支持的顏色變化。

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

四、對(duì)齊

在Bootstrap中的讀取圖標(biāo)是用rem，currentColor和display: inline-flex。這意味著它們可以輕易地調(diào)整大小、顏色以及快速對(duì)齊。

五、邊距

使用margin utilities像.m-5一樣簡(jiǎn)單地增加間隔。

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

六、定位

使用flexbox通用類別、float通用類別，或是文字排版在任何情況下都可以將讀取圖標(biāo)精確地放置在需要的位置上。

1、Flex

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

2、浮動(dòng)

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

3、文本對(duì)齊

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

七、大小

增加.spinner-border-sm和.spinner-grow-sm制作一個(gè)較小的讀取圖標(biāo)，讓它可以在其他元件中快速地被使用。

<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來(lái)根據(jù)需要更改尺寸。

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

八、按鈕

在按鈕內(nèi)使用讀取圖標(biāo)是表示當(dāng)前正在處理或正在進(jìn)行操作。也可以依照需求使用button text來(lái)更換讀取圖標(biāo)的文字。

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