progress

跳转到：
  1. 概述
  2. 使用上下文
  3. 属性
  4. DOM 接口
  5. 例子
  6. 浏览器兼容性
  7. 相关链接

概述

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上,显示的进度条如下:

progress-1.png

在Windows上,显示的进度条如下:

progress-firefox.JPG

附加示例

查看 orient.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
progressChrome Full support 6Edge Full support YesFirefox Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 6
Notes
Full support 6
Notes
Notes Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
Notes Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.
Opera Android Full support 11Safari iOS Full support 7
Notes
Full support 7
Notes
Notes Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android Full support Yes
maxChrome Full support 6Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes
valueChrome Full support 6Edge Full support YesFirefox Full support 6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 6Opera Android Full support 11Safari iOS Full support 7Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

相关链接

文档标签和贡献者

此页面的贡献者： mdnwebdocs-bot, fscholz, wbamberg, ziyunfei, ethertank
最后编辑者: mdnwebdocs-bot,