<progress>：进度指示元素

概述

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

尝试一下

使用上下文

使用策略                流文本 (Flow content (en-US)), 短文本 (phrasing content (en-US))
Content categories (en-US)     可标记内容，可触摸内容

有效内容                Phrasing content (en-US), 其中在它的后代中不能包含
Permitted content      <progress>元素。

标签省略                不可以，不允许，开始标签和结束标签都不能省略。
Tag omission

有效的父元素             任何可以包裹短文本 (phrasing content (en-US)) 的元素。

隐式元素                progressbar
ARIA role

有效的辅助元素            无
ARIA roles

DOM 接口                HTMLProgressElement

属性

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

max: 该属性描述了这个progress元素所表示的任务一共需要完成多少工作。
value: 该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).

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

DOM 接口

该元素实现了HTMLProgressElement接口。

例子

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

结果

在 Mac OS X 上，显示的进度条如下：

在 Windows 上，显示的进度条如下：

规范

Specification	Status	Comment
HTML Living Standard <progress>	Living Standard
HTML5 <progress>	Recommendation	起始定义

浏览器兼容性

BCD tables only load in the browser