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

打印页面