如何设置进度控件的样式 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

了解如何使用级联样式表 (CSS) 和 Windows JavaScript 库样式表来设置 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 控件的宽度和高度。