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-orient
CSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。
注:
该:indeterminate
伪类可用于匹配不确定进度条。在给它一个值之后,要将进度条更改为不确定的,你必须使用删除值属性element.removeAttribute("value")
例子
<progress value="70" max="100">70 %</progress>
结果
在Windows 7上,生成的进度如下所示:
其他例子
See -moz-orient
.
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<progress>' in that specification. | Living Standard | |
HTML5The definition of '<progress>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 6 | (Yes) | 61 2 | 10 | 11 | 5.2 |
max | 6 | (Yes) | 6 | 10 | 11 | 5.2 |
value | 6 | (Yes) | 6 | 10 | 11 | 5.2 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 61 2 | No | 11 | 73 |
max | (Yes) | (Yes) | (Yes) | 6 | No | 11 | 7 |
value | (Yes) | (Yes) | (Yes) | 6 | No | 11 | 7 |