HTML教程-HTML<progress>标签

用于显示任务的进度。它为网页开发人员提供了一种在网站上创建进度条的简单方法。它通常用于显示文件上传的进度。

HTML <progress> 标签是HTML5中的新标签，因此必须使用新的浏览器。

HTML <progress> 标签的属性

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

属性	描述
value	定义任务已完成的工作量。
max	定义任务总共需要的工作量。

<progress> 标签应仅用于表示任务的进度，而不仅仅是一个仪表（例如磁盘空间使用情况）。对于这种情况，使用 <meter> 元素。

---

HTML <progress> 标签示例

让我们先看一个没有属性的 HTML <progress> 示例。

<progress></progress>

现在我们来看一下带有 value 和 max 属性的进度示例。

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

样式化进度条

您可以在 <progress> 标签上应用 CSS 样式。

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

使用 JavaScript 的 HTML <progress> 标签

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

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

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<progress>	是	是	是	是	是