快速入門：新增進度控制項 (HTML)

發行項
03/04/2016

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

進度控制項提供一個方式讓您指出應用程式正在執行工作，例如下載影像、載入檔案或處理資料。這裡有幾種不同的進度控制項樣式，以及將它們新增到使用 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;

新增不確定的進度列

當您無法估計還剩下多少未完成的工作，而且工作不會封鎖使用者的互動時，可使用不確定的進度列。不確定的進度列不會在進度完成時顯示漸漸填滿，而是顯示點由左往右移動的動畫。如需何時使用不確定的進度列的詳細資訊，請參閱進度控制項的指導方針和檢查清單。

建立不確定的進度列

若要建立不確定的進度列，請建立進度元素，但不指定值或最大值。

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

新增不確定的進度環 (僅限 Windows)

當您無法估計還剩下多少未完成的工作，而且工作不會封鎖使用者的互動時，可使用不確定的進度環。不確定的進度環會以圓圈顯示一連串移動的點。如需何時使用不確定的進度環的詳細資訊，請參閱進度控制項的指導方針和檢查清單。

建立不確定的進度環

若要建立不確定的進度環，請建立進度元素，但不指定值或最大值，並將其類別設為 win-ring。

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

(win-ring 類別是適用於 JavaScript 的 Windows Library 提供的其中一個樣式)。

下一個範例顯示如何建立也會顯示文字的不確定進度環。

<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 控制項。

共用方式為