旋轉指示器

透過 Bootstrap 旋轉指示器顯示元件或頁面的載入狀態，這些指示器完全使用 HTML、CSS 建置，不含任何 JavaScript。

此頁面

關於

Bootstrap「旋轉指示器」可用於在專案中顯示載入狀態。它們僅使用 HTML 和 CSS 建置，表示您不需要任何 JavaScript 就能建立它們。不過，您需要一些自訂 JavaScript 來切換它們的可見性。它們的外觀、對齊和大小可以使用我們出色的實用程式類別輕鬆自訂。

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

此元件的動畫效果取決於 prefers-reduced-motion 媒體查詢。請參閱無障礙文件中的減少動作區段。

邊框旋轉器

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

html

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

顏色

邊框旋轉器使用 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} 工具會覆寫它。

擴大旋轉器

如果您不喜歡邊框旋轉器，請改用擴大旋轉器。雖然它在技術上不會旋轉，但它會重複擴大！

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>

對齊

Bootstrap 中的旋轉器使用 rem、currentColor 和 display: inline-flex 建立。這表示它們可以輕鬆調整大小、重新著色和快速對齊。

邊界

使用邊界工具，例如 .m-5，輕鬆設定間距。

html

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

配置

使用彈性盒狀模型工具、浮動工具或文字對齊工具，將旋轉器精確地放置在任何情況下您需要它們的位置。

彈性

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

載入中...

html

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

浮動

html

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

文字對齊

html

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

大小

加入 .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>

按鈕

在按鈕中使用旋轉圖示表示目前正在處理或進行某個動作。您也可以將旋轉圖示元素中的文字換掉，並視需要使用按鈕文字。

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

變數

已在 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 變數

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;

關鍵影格

用於建立旋轉器的 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;
  }
}