跳到主要內容 跳到文檔導航
Check
in English

紡紗廠

使用 Bootstrap 微調器指示組件或頁面的加載狀態，完全使用 HTML、CSS 和無 JavaScript 構建。

在本頁面

關於

引導程序“微調器”可用於顯示項目中的加載狀態。它們僅使用 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 中的微調器是用rems currentColor、 和display: inline-flex. 這意味著它們可以輕鬆調整大小、重新著色和快速對齊。

利潤

使用邊距實用程序，例如.m-5輕鬆間隔。

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

放置

使用flexbox 實用程序、浮動實用程序或文本對齊實用程序在任何情況下將微調器準確放置在您需要的位置。

柔性

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>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" 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" 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>
html 
<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>

CSS

變量

在 v5.2.0 中添加

作為 Bootstrap 不斷發展的 CSS 變量方法的一部分，微調器現在使用本地 CSS 變量.spinner-border來.spinner-grow增強實時自定義。CSS 變量的值是通過 Sass 設置的，因此仍然支持 Sass 自定義。

邊框微調器變量：

  --#{$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;

不斷增長的微調變量：

  --#{$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該類執行以下操作：

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 變量

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

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}