<progress>:进度指示元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

HTML中的 <progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式。

尝试一下

使用上下文

内容分类 流式内容短语内容、可关联标签内容、可感知内容
允许的内容 可感知内容,但其后代元素不能有 <progress> 元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 接受可感知内容的任何元素。
隐式 ARIA 角色 progressbar
允许的 ARIA 角色 没有允许的角色(role
DOM 接口 HTMLProgressElement

属性

和其他的 HTML 元素一样,该元素具有全局属性.

max

该属性描述了这个progress元素所表示的任务一共需要完成多少工作。

value

该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).

备注: 你可以使用orient属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类:indeterminate可以用来匹配那些不确定的进度条。

DOM 接口

该元素实现了HTMLProgressElement接口。

示例

html
<progress value="70" max="100">70 %</progress>

结果

规范

Specification
HTML Standard
# the-progress-element

浏览器兼容性

BCD tables only load in the browser

参见