<progress>:进度指示元素
概述
HTML中的<progress>
元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式。
尝试一下
使用上下文
使用策略 流文本 (Flow content (en-US)), 短文本 (phrasing content (en-US)) Content categories (en-US) 可标记内容,可触摸内容 有效内容 Phrasing content (en-US), 其中在它的后代中不能包含 Permitted content<progress>
元素。 标签省略 不可以,不允许,开始标签和结束标签都不能省略。 Tag omission 有效的父元素 任何可以包裹短文本 (phrasing content (en-US)) 的元素。 隐式元素progressbar
ARIA role 有效的辅助元素 无 ARIA roles DOM 接口HTMLProgressElement
属性
和其他的 HTML 元素一样,该元素具有全局属性.
max
- 该属性描述了这个
progress
元素所表示的任务一共需要完成多少工作。 value
- 该属性用来指定该进度条已完成的工作量。如果没有
value 属性
,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).
Note: 你可以使用orient
(en-US)属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类:indeterminate
可以用来匹配那些不确定的进度条。
DOM 接口
该元素实现了HTMLProgressElement
接口。
例子
<progress value="70" max="100">70 %</progress>
结果
在 Mac OS X 上,显示的进度条如下:
在 Windows 上,显示的进度条如下:
规范
Specification | Status | Comment |
---|---|---|
HTML Living Standard <progress> |
Living Standard | |
HTML5 <progress> |
Recommendation | 起始定义 |
浏览器兼容性
BCD tables only load in the browser