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

進度條（Progress）

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

本頁內容

v5.3.0 中的新標記 — 我們已棄用先前的進度條 HTML 結構，並以更具無障礙性的結構取代。先前的結構將持續運作直到 v6。在我們的遷移指南中查看變更內容。

運作原理（How it works）

進度元件由兩個 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>

進度條尺寸（Bar sizing）

寬度（Width）

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>

高度（Height）

您只需在 .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>

標籤（Labels）

透過在 .progress-bar 內放置文字，為您的進度條加入標籤。

25%
html 
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

長標籤（Long labels）

請注意，預設情況下，.progress-bar 內的內容使用 overflow: hidden 控制，因此不會超出進度條。如果您的進度條比其標籤短，內容將被截斷並可能變得不可讀。要更改此行為，您可以使用溢位通用類別中的 .overflow-visible。

使用此方法時，比進度條長的標籤可能無法完全無障礙存取，因為它依賴文字顏色與 .progress 和 .progress-bar 背景顏色具有正確的對比度。實作此範例時請謹慎。

如果文字可能與進度條重疊，我們通常建議將標籤顯示在進度條外部，以獲得更好的無障礙性。

背景（Backgrounds）

使用背景通用類別來更改個別進度條的外觀。

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 text-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 text-bg-info" 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 text-bg-warning" 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 text-bg-danger" style="width: 100%">100%</div>
</div>

多個進度條（Multiple bars）

您可以在具有 .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>

條紋樣式（Striped）

在任何 .progress-bar 上加入 .progress-bar-striped，透過 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>

動畫條紋（Animated stripes）

條紋漸層也可以加入動畫。在 .progress-bar 上加入 .progress-bar-animated，透過 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

變數（Variables）

Added in 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 變數（Sass variables）

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;

Keyframes

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

scss/_progress.scss 
@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: var(--#{$prefix}progress-height); }
  }
}