HTML <progress> 标签用于显示任务的进度。它为 Web 开发人员提供了一种在网站上创建进度条的简单方法。它主要用于在网页上显示文件上传的进度。
HTML 进度标签是 HTML5 中的新标签，因此您必须使用新的浏览器。
HTML <progress> 标签支持全局和事件属性以及 2 个特定属性。
| 标签 | 描述 |
|---|---|
| 价值 | 它定义了任务已经完成了多少工作。 |
| 最大限度 | 它定义了任务总共需要多少工作。 |
让我们看看没有属性的 HTML 进度示例。
<!DOCTYPE> <html> <body> <progress></progress> </body> </html>
输出：
让我们看看带有 value 和 max 属性的进度示例。
<!DOCTYPE> <html> <body> Downloading progress: <progress value="43" max="100"></progress> </body> </html>
输出：
下载进度：
您可以在进度标签上应用 CSS 代码。
<!DOCTYPE>
<html>
<head>
<style>
progress{width:300px;height:30px}
</style>
</head>
<body>
<progress value="50" max="100"></progress>
</body>
</html>输出：
<progress> 标签应与 JavaScript 结合使用以显示任务的进度。
<!DOCTYPE>
<html>
<body>
<script>
var gvalue=1;
function abc(){
var progressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
abc();
}, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">click me</button>
</body>
</html>输出：
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <progress> | Yes | Yes | Yes | Yes | Yes |