语言: HTML | XAML

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

Applies to Windows and Windows Phone

进度控件提供了一种方法,可以指示你的应用正在执行工作,如下载图像、加载文件或处理数据。 下面列出了不同的进度控件样式以及如何将它们添加到使用 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 控件。

相关主题

progress
如何设置进度控件的样式
进度控件指南和清单

 

 

显示:
© 2014 Microsoft