進度條

顯示您的進度。一種簡單的方式，將進度條加入您的版面配置。您只需要兩個 HTML 元素就能製作，而且很容易自訂。

基礎

進度條有兩個元素：容器 .progress，以及計量器 .progress-meter。程式碼範例中的 role 和 aria- 屬性會說明進度條的狀態

aria-valuemin：最小值。
aria-valuemax：最大值。
aria-valuenow：目前值。

如果進度條的值不是數字，請再加入屬性 aria-valuetext，其中應包含進度條值的易讀版本。

<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-meter"></div>
</div>

將 width CSS 屬性加入內部計量器，以填滿進度條。

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 50%"></div>
</div>

色彩

進度條可以使用 .secondary、.success、.warning 和 .alert 色彩來設定樣式。

在影片中觀看此部分

<div class="secondary progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 25%"></div>
</div>

<div class="success progress">
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="warning progress">
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="alert progress">
  <div class="progress-meter" style="width: 75%"></div>
</div>

帶有文字

您可以在進度條的計量器中加入文字。請確定您在計量器中使用的文字也用於 aria-valuetext 屬性。

在影片中觀看此部分

<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <span class="progress-meter" style="width: 25%">
    <span class="progress-meter-text">25%</span>
  </span>
</div>

25%

原生進度

作為我們自訂進度條樣式的替代方案，您也可以選擇使用原生 <progress> 元素。它提供建立進度條的更簡潔方法，但它不支援 IE9 和其他一些較舊的瀏覽器。查看 <progress> 元素支援。

<progress max="100" value="75"></progress>

如果您使用 Foundation 的 Sass 版本，請將此行加入您的主 Sass 檔案，以匯出 <progress> CSS

@include foundation-progress-element;

<progress> 元素可以使用相同的著色類別進行樣式設定：.secondary、.success、.warning 和 .alert。

<progress class="secondary" max="100" value="75"></progress>
<progress class="success" max="100" value="75"></progress>
<progress class="warning" max="100" value="75"></progress>
<progress class="alert" max="100" value="75"></progress>

原生計量器

對於特別有冒險精神的開發人員，我們也提供 <meter> 元素的樣式。有什麼不同？<progress> 表示會隨時間變化的值，例如儲存容量。<meter> 表示會在某個最佳值附近波動的值。它不支援 Internet Explorer、Mobile Safari 或 Android 2。查看 <meter> 元素支援。

如果您使用 Foundation 的 Sass 版本，請將此行加入您的主 Sass 檔案，以匯出 <meter> CSS

@include foundation-meter-element;

計量器會根據目前的數值以及定義的低、中、高範圍自動為自己著色。進一步了解 <meter> 數值的運作原理。

<meter value="30" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="50" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="100" min="0" low="33" high="66" optimum="100" max="100"></meter>

螢幕閱讀程式

在幾個螢幕閱讀程式中測試進度條，使用不同的 aria-valuenow 值。螢幕閱讀程式的行為可能並不總是顯而易見。

如果進度條的值是數字，請確定範圍定義正確（從 aria-valuemax 中提取 aria-valuemin 定義完整範圍）。對於百分比進度條（0-100%），值範圍通常為 100（aria-valuemin="0" 和 aria-valuemax="100"）。大多數螢幕閱讀程式會根據以下公式計算宣布的百分比

aria-valuenow / (aria-valuemax - aria-valuemin) = announced percentage

Sass 參考

變數

您可以使用專案的設定檔中的這些 Sass 變數，自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$meter-height`	長度	`1rem`	`<meter>` 元素的高度。
`$meter-radius`	長度	`$global-radius`	`<meter>` 元素的邊框半徑。
`$meter-background`	顏色	`$medium-gray`	`<meter>` 元素的背景顏色。
`$meter-fill-good`	顏色	`$success-color`	`<meter>` 元素中最佳值的計量器填滿。
`$meter-fill-medium`	顏色	`$warning-color`	`<meter>` 元素中平均值的計量器填滿。
`$meter-fill-bad`	顏色	`$alert-color`	`<meter>` 元素中次佳值的計量器填滿。
`$progress-height`	數字	`1rem`	進度條的高度。
`$progress-background`	顏色	`$medium-gray`	進度條的背景顏色。
`$progress-margin-bottom`	數字	`$global-margin`	進度條的底部邊距。
`$progress-meter-background`	顏色	`$primary-color`	進度條計量器的預設顏色。
`$progress-radius`	數字	`$global-radius`	進度條的預設半徑。

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。您也可以自己使用混合，從我們的元件建構您自己的類別結構。

progress-container

@include progress-container;

新增進度條容器的樣式。

progress-meter

@include progress-meter;

新增進度條內部計量器的樣式。

progress-meter-text

@include progress-meter-text;

新增進度計量器中文字的樣式。