HTML - progress 标签

HTML <progress> 标签用于显示为显示任务完成进度的指示器，通常显示为进度条。这是 HTML5 中包含的新标签。它被用作进度指标。

语法


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

属性

HTML 进度标签支持 HTML 的全局属性和事件属性。下面列出了一些特定属性：

属性	值	描述
value	number	定义保留一个数字进度条的当前值。
max	number	定义保留设置进度条的最大值。

<progress> 标签的示例

在以下示例中，我们将看到用例，在哪里以及如何使用 <progress> 标签来表示进度状态。

<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> 标签。如果进度标签中未指定任何属性，则进度条将从左到右和从右到左移动。


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

支持的浏览器

浏览器
<progress>	8.0	10.0	16.0	6.0	11.0

打印本页