在线文档教程

progress

<progress>

HTML5中引入

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

内容类别 Flow content, phrasing content, labelable content, palpable content.
允许的内容 Phrasing content ,但其后代中不得有<progress>元素。
标记遗漏没有,起始和结束标签都是强制性的。
允许父母任何接受 phrasing content 的元素。
允许ARIA角色没有
DOM界面HTMLProgressElement

属性

这个元素包含全局属性。

max该属性描述progress元素指示的任务需要多少工作。该max属性(如果存在)必须具有大于零的值并且是有效的浮点数。默认值是1.

注:最小值始终为0,并且min属性不允许用于progress元素。您可以使用-moz-orientCSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。

注::indeterminate伪类可用于匹配不确定进度条。在给它一个值之后,要将进度条更改为不确定的,你必须使用删除值属性element.removeAttribute("value")

例子

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

结果

在Windows 7上,生成的进度如下所示:

其他例子

See -moz-orient.

规范

SpecificationStatusComment
HTML Living StandardThe definition of '<progress>' in that specification.Living Standard
HTML5The definition of '<progress>' in that specification.RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support6(Yes)61 210115.2
max6(Yes)610115.2
value6(Yes)610115.2

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)61 2No1173
max(Yes)(Yes)(Yes)6No117
value(Yes)(Yes)(Yes)6No117