HTML Progress 标签

2025 年 3 月 25 日 | 阅读 2 分钟

HTML <progress> 标签 用于显示任务的进度。它为 Web 开发人员提供了一种在网站上创建进度条的简便方法。它主要用于在网页上显示文件上传进度。

HTML progress 标签是 HTML5 新增的，因此您必须使用新版浏览器。

HTML Progress 标签的属性

HTML <progress> 标签支持全局属性和事件属性，以及 2 个特定属性。

标签	描述
值	它定义了任务已完成的工作量。
max	它定义了任务所需的总工作量。

progress 标签应仅用于表示任务进度，而不能用于表示仪表（如磁盘空间使用情况）。为此目的，可以使用 <meter> 元素。

HTML Progress 标签示例

让我们看一个不带属性的 HTML progress 示例。

输出

让我们来看一个带有 value 和 max 属性的进度示例。

Downloading progress:
<progress value="43" max="100"></progress>

输出

下载进度

样式化进度条

您可以在 progress 标签上应用 CSS 代码。

progress{
  width: 300px;
  height: 30px;
}

输出

带 JavaScript 的 HTML Progress 标签

应结合 JavaScript 使用 <progress> 标签来显示任务的进度。

<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>

输出