©
本文档使用
php中文网手册 发布
在HTML5中引入
HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.
内容类别 | Flow content, phrasing content, labelable content, palpable content. |
|---|---|
允许的内容 | Phrasing content ,但其后代中不得有<progress>元素。 |
标记遗漏 | 没有,起始和结束标签都是强制性的。 |
允许父母 | 任何接受 phrasing content 的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLProgressElement |
这个元素包含全局属性。
max该属性描述progress元素指示的任务需要多少工作。该max属性(如果存在)必须具有大于零的值并且是有效的浮点数。默认值是1.
value此属性指定已完成多少任务。它必须是0 max到0 之间的有效浮点数,如果max省略,则在0和1之间。如果没有value属性,进度条是不确定的; 这表明活动正在进行,没有迹象表明预计会花多长时间。
注:最小值始终为0,并且min属性不允许用于progress元素。您可以使用-moz-orientCSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。
注:该: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 |