進度

使用 Bootstrap 自訂進度條的說明文件和範例，支援堆疊條、動畫背景和文字標籤。

此頁面

v5.3.0 中的新標記 — 我們已棄用進度條的先前 HTML 結構，並以更易於存取的結構取代之。先前結構將持續運作至 v6。在我們的遷移指南中查看變更內容。

運作方式

進度元件使用兩個 HTML 元素、一些用於設定寬度的 CSS，以及幾個屬性來建置。我們不使用 HTML5 <progress> 元素，以確保您可以堆疊進度條、為其加入動畫，以及在它們上方放置文字標籤。

我們使用 .progress 作為包裝器，以指示進度條的最大值。
.progress 包裝器還需要 role="progressbar" 和 aria 屬性，以使其具有可存取性，包括可存取的名稱（使用 aria-label、aria-labelledby 或類似屬性）。
我們使用內部的 .progress-bar 純粹用於視覺化條形和標籤。
.progress-bar 需要內嵌樣式、實用程式類別或自訂 CSS 來設定其寬度。
我們提供一個特殊的 .progress-stacked 類別，以建立多個/堆疊的進度條。

將所有這些組合在一起，您就會有以下範例。

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

條形大小

寬度

Bootstrap 提供一些用於設定寬度的實用程式。根據您的需求，這些實用程式可能有助於快速設定 .progress-bar 的寬度。

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

高度

您只在 .progress 容器上設定 height 值，因此如果您變更該值，內部的 .progress-bar 會自動調整大小。

html

<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

請注意，預設情況下，.progress-bar 內的內容由 overflow: hidden 控制，因此它不會超出該條。如果進度條短於其標籤，內容將會被截斷，可能導致無法讀取。若要變更此行為，你可以從溢出工具程式使用 .overflow-visible，但請務必定義明確的文字顏色，以確保文字保持可讀性。不過，請注意，目前此方法不考慮色彩模式。

進度條的長標籤文字，設定為深色

html

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>

背景

使用背景工具程式類別來變更個別進度條的外觀。

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

輔助功能提示：僅使用色彩來增加意義只會提供視覺指示，這不會傳達給螢幕閱讀器等輔助技術的使用者。請確保意義從內容本身顯而易見（例如，可見文字具有 足夠的 色彩對比），或透過其他方式包含在內，例如使用 .visually-hidden 類別隱藏的附加文字。

如果你要將標籤新增至具有自訂背景顏色的進度條，請務必設定適當的文字顏色，以確保標籤保持可讀性並具有足夠的對比。

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

或者，你可以使用新的結合色彩和背景輔助類別。

75%

html

<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>

多個條

你可以在包含 .progress-stacked 的容器內包含多個進度元件，以建立單一的堆疊進度條。請注意，在這種情況下，設定進度條視覺寬度的樣式必須套用至 .progress 元素，而不是 .progress-bar。

html

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

條紋

將 .progress-bar-striped 加入任何 .progress-bar，即可透過 CSS 漸層在進度條的背景顏色上套用條紋。

html

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

動畫條紋

條紋漸層也可以動畫化。將 .progress-bar-animated 加入 .progress-bar，即可透過 CSS3 動畫將條紋從右至左動畫化。

html

<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

CSS

變數

在 v5.2.0 中新增

作為 Bootstrap 不斷演進的 CSS 變數方法的一部分，進度條現在於 .progress 上使用本機 CSS 變數，以增強即時自訂功能。CSS 變數的值透過 Sass 設定，因此 Sass 自訂功能仍受支援。

scss/_progress.scss

--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass 變數

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

關鍵影格

用於為 .progress-bar-animated 建立 CSS 動畫。包含在 scss/_progress-bar.scss 中。

scss/_progress.scss

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}