旋轉指示器

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

關於

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

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

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

邊框旋轉指示器

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

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

顏色

邊框旋轉器使用 currentColor 作為其 border-color，表示你可以使用文字顏色工具自訂顏色。你可以對標準旋轉器使用任何我們的文字顏色工具。

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

為什麼不使用 border-color 工具？每個邊框旋轉器都至少為一側指定 transparent 邊框，因此 .border-{color} 工具會覆寫它。

擴大旋轉指示器

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

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

再次強調，這個旋轉器使用 currentColor 建立，因此你可以使用文字顏色工具輕鬆變更其外觀。以下是藍色旋轉器，以及支援的變體。

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

對齊

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

邊界

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

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

放置

使用彈性盒工具、浮動工具或文字對齊工具，將旋轉器準確放置在任何情況下你需要的位置。

彈性

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

載入中...

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

浮動

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

文字對齊

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

大小

加入 .spinner-border-sm 和 .spinner-grow-sm，以建立一個較小的旋轉器，可以在其他元件中快速使用。

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

或者，使用自訂 CSS 或內嵌樣式，根據需要變更尺寸。

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

按鈕

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

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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="sr-only">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>