引进于 HTML5
概述
HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.
使用上下文
| 允许内容 | Phrasing content |
| 是否可以省略标签 | 不可以,起始标签和结束标签都是必须的. |
| 有效的父元素 | Phrasing content, 但不能包含其他的progress后代元素. |
| 规范文档 | HTML5, section 4.10.16 |
属性
和其他的HTML元素一样,该元素具有全局属性.
-
max -
该属性描述了这个
progress元素所表示的任务一共需要完成多少工作. -
value -
该属性用来指定该进度条已完成的工作量.如果没有
value属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).
你可以使用orient属性来指定该进度条的显示方向是横向(默认)还是纵向.CSS伪类:indeterminate可以用来匹配那些不确定的进度条.
DOM 接口
该元素实现了HTMLProgressElement接口.
例子
<progress value="70" max="100">70 %</progress>
结果
在Mac OS X上,显示的进度条如下:
在Windows上,显示的进度条如下:
附加示例
查看 orient.
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 6.0 | 6.0 (6.0) | 10 | 11.0 | Nightly build |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 未实现 | 6.0 (6.0) | 未实现 | 11.0 | 未实现 |
Gecko备注
Gecko提供了CSS伪类::-moz-progress-bar,来让你控制进度条中表示目前任务完成量的那一部分内容的样式.
Gecko 14.0 note
(Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11)
在Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11)之前, <progress> 元素被错误的归类成为一个表单元素,因此也存在一个form属性.目前该bug已经被修复.