Skip to main content Skip to docs navigation
View on GitHub

讀取圖示 (Spinners)

使用 Bootstrap 讀取圖示以表示元件載入狀態,這些讀取圖示完全使用 HTML, CSS,而沒有使用到 JavaScript。

關於

Bootstrap “讀取圖示 (spinners)” 可用於您的專案中來顯示載入狀態。它們僅使用 HTML 和 CSS 來建構,這意味著您不需要任何 JavaScript 來創建它。但您仍需要客製 JavaScript 來切換它們的顯示狀況。它們的外觀、對齊以及尺寸都可以透過我們驚人的通用類別來自定義。

基於無障礙的目標,此處每個載入器都需要包含 role="status" 和巢狀的 <span class="visually-hidden">Loading...</span>.

該元件的動畫效果取決於 prefers-reduced-motion media queries。請參考 reduced motion section of our accessibility documentation

Border 讀取圖示

使用 border 讀取圖示來當作輕量的載入狀態顯示。

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

顏色

The border 讀取圖示使用 currentColor 來當作它的 border-color,這代表你可以使用 文字顏色通用類別 來自定義它的顏色。你可以在標準的讀取圖示上使用任何通用類別中的顏色。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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} 通用類別會覆蓋它。

漸變讀取圖示

如果你不喜歡 border 讀取圖示,可以切換到漸變讀取圖示。雖然技術上來說,它不會旋轉,但它會反覆漸變顯示!

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

同上,這個讀取圖示也使用 currentColor,所以你可以輕易地使用 文字顏色通用類別 來改變它的外觀。這邊是藍色,以及它所支援的顏色變化。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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, currentColordisplay: inline-flex。這意味著它們可以輕易地調整大小、顏色以及快速對齊。

Margin

使用 margin utilities 像是 .m-5 簡單地增加間隔。

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

位置

使用 flexbox 通用類別float 通用類別,或是 文字排版 在任何情況下都可以將讀取圖示精確地放置在您需要的位置上。

Flex

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

Floats

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

Text align

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

尺寸

增加 .spinner-border-sm.spinner-grow-sm 製作一個較小的讀取圖示,讓它可以在其他元件中快速地被使用。

Loading...
Loading...
<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 來根據需要更改尺寸。

Loading...
Loading...
<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-vertical-align:  -.125em;
$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;
  }
}