跳至主要內容 跳至文件導覽
View on GitHub

載入圖示（Spinners）

使用完全由 HTML、CSS 建構且無需 JavaScript 的 Bootstrap 載入圖示，指示元件或頁面的載入狀態。

本頁內容

關於（About）

Bootstrap「載入圖示」可用於在您的專案中顯示載入狀態。它們僅使用 HTML 和 CSS 建構，這意味著您不需要任何 JavaScript 來建立它們。然而，您將需要一些自訂 JavaScript 來切換它們的可見性。它們的外觀、對齊和尺寸可以使用我們強大的通用類別輕鬆自訂。

為了無障礙目的，這裡的每個載入器都包含 role="status" 和巢狀的 <span class="visually-hidden">Loading...</span>。

此元件的動畫效果取決於 prefers-reduced-motion 媒體查詢。請參閱我們無障礙文件中的減少動態效果章節。

Border 載入圖示（Border spinner）

使用邊框載入圖示作為輕量級的載入指示器。

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

顏色（Colors）

邊框載入圖示使用 currentColor 作為其 border-color，這意味著您可以使用文字顏色通用類別自訂顏色。您可以在標準載入圖示上使用我們任何的文字顏色通用類別。

html 
<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} 通用類別會覆寫它。

成長載入圖示（Growing spinner）

如果您不喜歡邊框載入圖示，請切換到成長載入圖示。雖然它技術上不會旋轉，但它會反覆增長！

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

同樣地，這個載入圖示是使用 currentColor 建構的，因此您可以使用文字顏色通用類別輕鬆更改其外觀。以下是藍色版本以及支援的變體。

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

對齊（Alignment）

Bootstrap 中的載入圖示使用 rem、currentColor 和 display: inline-flex 建構。這意味著它們可以輕鬆調整大小、重新著色和快速對齊。

邊距（Margin）

使用像 .m-5 這樣的邊距通用類別來輕鬆設定間距。

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

位置（Placement）

使用 Flexbox 通用類別、浮動通用類別或文字對齊通用類別，在任何情況下將載入圖示精確放置在您需要的位置。

Flexbox

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

浮動（Floats）

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

文字對齊（Text align）

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

尺寸（Size）

加入 .spinner-border-sm 和 .spinner-grow-sm 來建立較小的載入圖示，可以快速在其他元件中使用。

html 
<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 或行內樣式來更改尺寸。

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

按鈕（Buttons）

在按鈕內使用載入圖示來指示操作正在處理中或正在進行。您也可以將載入圖示元素中的文字替換掉，並根據需要使用按鈕文字。

html 
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>
html 
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

CSS

變數（Variables）

Added in v5.2.0

作為 Bootstrap 持續演進的 CSS 變數方法的一部分，載入圖示現在在 .spinner-border 和 .spinner-grow 上使用區域 CSS 變數，以增強即時自訂能力。CSS 變數的值透過 Sass 設定，因此仍然支援 Sass 自訂。

邊框載入圖示變數：

scss/_spinners.scss 
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

成長載入圖示變數：

scss/_spinners.scss 
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

對於這兩種載入圖示，小型載入圖示修飾類別用於根據需要更新這些 CSS 變數的值。例如，.spinner-border-sm 類別執行以下操作：

scss/_spinners.scss 
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 變數（Sass variables）

scss/_variables.scss 
$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

用於為我們的載入圖示建立 CSS 動畫。包含在 scss/_spinners.scss 中。

scss/_spinners.scss 
@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
scss/_spinners.scss 
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}