?
This document uses PHP Chinese website manual Release
在HTML5中引入
HTML中的progress (<progress>
) 元素用來顯示一項任務的完成進度.雖然規(guī)范中沒有規(guī)定該元素具體如何顯示,瀏覽器開發(fā)商可以自己決定,但通常情況下,該元素都顯示為一個進度條形式.
內(nèi)容類別 | Flow content, phrasing content, labelable content, palpable content. |
---|---|
允許的內(nèi)容 | Phrasing content ,但其后代中不得有<progress>元素。 |
標記遺漏 | 沒有,起始和結束標簽都是強制性的。 |
允許父母 | 任何接受 phrasing content 的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLProgressElement |
這個元素包含全局屬性。
max
該屬性描述progress
元素指示的任務需要多少工作。該max
屬性(如果存在)必須具有大于零的值并且是有效的浮點數(shù)。默認值是1.
value
此屬性指定已完成多少任務。它必須是0 max
到0 之間的有效浮點數(shù),如果max
省略,則在0和1之間。如果沒有value
屬性,進度條是不確定的; 這表明活動正在進行,沒有跡象表明預計會花多長時間。
注:最小值始終為0,并且min
屬性不允許用于progress元素。您可以使用-moz-orient
CSS屬性來指定進度條應該水平呈現(xiàn)(默認)還是垂直呈現(xiàn)。
注:該: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 |