HTML - <progress> 標籤

HTML <progress> 標籤用於顯示任務完成進度的指示器，通常顯示為進度條。這是 HTML5 中包含的新標籤。它用作進度指示器。

語法

<progress>.....</progress>

屬性

HTML progress 標籤支援 HTML 的全域性和事件屬性。還有一些特定的屬性，如下所示。

HTML progress 標籤屬性

屬性	屬性值	描述
value	數值	儲存一個數字，該數字定義進度條的當前值。
max	數值	用於設定進度條的最大值。

HTML progress 標籤示例

在下面的示例中，我們將看到使用案例，以及如何在何處使用 HTML progress 標籤來表示進度狀態。

指定進度條

在下面的示例中，讓我們看看<progress>標籤的用法以及它如何顯示進度條。

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <label for="task">Work completed:</label>
   <progress id="task" value="35" max="100"> 35% </progress>
</body>
</html>

使用 progress 標籤顯示下載完成情況

考慮下面的示例，我們使用<progress>標籤並顯示已下載檔案的數量。

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <label for="file">Downloading progress:</label>
   <progress id="file" value="45" max="100"> 45% </progress>
</body>
</html>

沒有屬性的無效進度條

讓我們看下面的示例，我們在其中使用沒有屬性的<progress>標籤。如果在 progress 標籤中未指定任何屬性，則進度條將從左到右，再從右到左移動。

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <progress></progress>
</body>
</html>

支援的瀏覽器

標籤
progress	是 8.0	是 10.0	是 16.0	是 6.0	是 11.0

html_tags_reference.htm

列印頁面