概述
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
.
浏览器兼容性
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
progress | Chrome Full support 6 | Edge Full support Yes | Firefox
Full support
6
| IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
Full support
6
| Opera Android Full support 11 | Safari iOS
Full support
7
| Samsung Internet Android Full support Yes |
max | Chrome Full support 6 | Edge Full support Yes | Firefox Full support 6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
value | Chrome Full support 6 | Edge Full support Yes | Firefox Full support 6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.