<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