快速入门：添加进度控件 (HTML)

项目
03/04/2016

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

进度控件提供了一种方法，可以指示你的应用正在执行工作，如下载图像、加载文件或处理数据。下面列出了不同的进度控件样式以及如何将它们添加到使用 JavaScript 的 Windows 运行时应用中。

先决条件

我们假设你能够创建使用 JavaScript 的基本 Windows 运行时应用。有关创建你的第一个应用的帮助，请参阅创建你的第一个使用 JavaScript 的 Windows 运行时应用。有关创建第一个控件和添加事件处理程序的帮助，请参阅快速入门：添加控件和事件处理程序。

进度控件样式

progress 控件有三种样式：确定进度条样式、不确定进度条样式和不确定进度环样式。这些样式向用户指示什么时候待完成的工作量是已知的，什么时候不是已知的，以及任务是否为模式任务。

确定进度条：显示应用执行的进度状况。在工作进行过程中，填充颜色会从左向右延伸，直到它填满进度条。
不确定进度条：指示用户可以在任务继续执行时与 UI 交互。在右侧的动画中，点出现在左侧，并沿着一个轨道向右移动，直到它们到达轨道的终点，到达终点后随即消失。
不确定进度环（仅限 Windows）：指示在应用完成任务之前，用户活动被阻止，也就是说用户活动是模式活动。在该动画中，几个点沿着一个圆顺时针移动。

添加确定进度条

确定进度条显示应用执行的进度状况。随着工作进行，进度条逐渐填满。如果能以时间、字节数、文件数或其他某些可量化的测量单位估计其余的工作量，请使用确定进度条。有关何时使用确定进度条的详细信息，请参阅进度控件指南和清单。

进度条提供 3 个用来设置和确定进度的属性：

属性	描述
max	用来指定完成值的数值。默认值为 1.0。
value	用来指定当前进度的数值。如果要显示文件下载进度，此值可以是已经下载的字节数（你随后可以将 max 设置为要下载的字节总数）。
position	（只读。）当前进度指示器，等于 value 除以 max。

创建确定进度条

若要创建确定进度条，请创建一个进度元素并设置它的 value 属性。如果你不想使用默认的完成值 1.0，可以通过设置 max 属性来更改。此示例创建一个确定进度条，并将它的 value 设置为 30，将 max 设置为 100。创建的进度条显示进度完成了 30%。

<progress id="determinateProgressBar" value="30" max="100"></progress>

更新确定进度条的值

前面的示例展示了如何在标记中指定进度条的值。在实际应用中，可以使用 JavaScript 更新进度条的值以响应某个进度指示器。例如，如果你的进度条表示已下载了多少个文件，那么每次下载完一个文件就更新此值。

以下示例更新确定进度条的值。

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

添加不确定进度条

如果无法估计完成任务还剩余的工作量，而且任务不阻止用户交互，请使用不确定进度条。不确定进度条不显示随着进度的完成逐渐填满的进度条，而是显示从左到右移动的点状动画。有关何时使用不确定进度条的详细信息，请参阅进度控件指南和清单。

创建不确定进度条

若要创建不确定进度条，请创建一个进度元素而不指定值或 max。

<!-- Create an indeterminate progress bar -->
<progress></progress>

添加不确定进度环（仅限 Windows）

如果无法估计完成任务还剩余的工作量，而且任务会阻止用户交互，请使用不确定进度环。不确定进度环显示在圆圈中移动的点状动画。有关何时使用不确定进度环的详细信息，请参阅进度控件指南和清单。

创建不确定进度环

若要创建不确定进度环，请创建一个进度元素并将它的类设置为 win-ring，但不指定值或 max。

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

（win-ring 类是适用于 JavaScript 的 Windows 库提供的样式之一。）

下一个示例展示如何创建同时显示文本的不确定进度环。

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

下面是上例随附的 CSS 样式。

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

摘要和后续步骤

你学习了如何创建不同的进度控件类型。

在下一个主题如何设置进度控件的样式中，你将了解如何使用 CSS 和 WinJS 类为 progress 控件设置样式。

之后，查看进度控件指南和清单，它详细介绍了何时以及如何使用 progress 控件。