如何設定進度控制項的樣式 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何使用階層式樣式表 (CSS) 及適用於 JavaScript 的 Windows Library 樣式表來設定 progress 控制項的樣式。

您必須知道的事

我們假設您知道如何建立三種不同類型的 progress 控制項：確定的進度列、不確定的進度列，以及不確定的進度環。若要了解如何新增不同類型的 progress 控制項，請參閱快速入門：新增進度控制項。

這些 CSS 屬性特別有助於設定 progress 控制項的樣式：

width
指定進度控制項的寬度。若為不確定的進度環，則寬度與高度應該相同。
height
指定進度控制項的高度。若為不確定的進度環，則寬度與高度應該相同。
color
指定確定的進度列之列部分的色彩，以及不確定的進度列及不確定的進度環中各點的色彩。

這個範例會建立一個具有藍色列的確定的 progress 列。
```
<progress value="0.4" style="color: blue"  />
```

progress 控制項提供的虛擬元素可讓您當成選取器來設定控制項特定部分的樣式：

::-ms-fill
將一或多個樣式套用到確定的 progress 控制項的列部分，並指定不確定的進度控制項的動畫。

除了 animation-name 樣式屬性 (控制不確定的進度列及環的動畫) 之外，所有樣式都會套用到確定的進度列的列部分。

這個範例會讓 progress 控制項顯示為中繼進度環。
```
/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
```

(如需可以用於結合虛擬元素及其他選取器的不同方式的詳細資訊，請參閱了解 CSS 選取器)。

這個控制項支援的下列虛擬類別可讓您當成選取器，在該控制項處於特定狀態時設定其樣式。

:indeterminate
將一或多個樣式套用到處於不確定狀態的 progress 控制項。

這個範例會定義不確定的 progress 控制項的樣式。
```
progress:indeterminate {
    /* styling here */
}
```

(如需可以用於結合虛擬類別及其他選取器的不同方式的詳細資訊，請參閱了解 CSS 選取器)。

WinJS 提供數種可用來設定 progress 控制項樣式的 CSS 類別。

若要使用這些類別，請將控制項的 class 屬性設為類別的名稱。您可以將多個類別指派給一個元素；只要以空格區隔類別名稱即可。這個範例會將 win-ring 及 win-large 類別套用到 progress 控制項。

<progress class="win-ring win-large" />

WinJS 提供下列可用來設定 progress 控制項樣式的 CSS 類別：

win-error
暫停確定的 progress 列，並以錯誤樣式顯示。
win-large
讓 progress 控制項變大。將這個樣式用於全螢幕強制回應作業。
win-medium
讓 progress 控制項大小適中。如果您在 20 點文字旁邊顯示進度環，請使用這個類別。
win-paused
暫停確定的 progress 列的進度。
win-ring
將 progress 控制項顯示為不確定的進度環。您必須設定 width 與 height 屬性或使用 win-medium 或 win-large 類別，來指定 progress 的寬度與高度。