<progress>：进度指示元素 - HTML（超文本标记语言） 编辑

概述

HTML中的<progress>元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

使用上下文

使用策略                流文本(Flow content), 短文本(phrasing content)
Content categories     可标记内容,可触摸内容

有效内容                Phrasing content, 其中在它的后代中不能包含
Permitted content      <progress>元素.

标签省略                不可以,不允许，开始标签和结束标签都不能省略。
Tag omission

有效的父元素             任何可以包裹短文本(phrasing content)的元素.

隐式元素                progressbar
ARIA role

有效的辅助元素            无
ARIA roles

DOM接口                HTMLProgressElement

属性

和其他的HTML元素一样,该元素具有全局属性.

max

该属性描述了这个progress元素所表示的任务一共需要完成多少工作.

value

该属性用来指定该进度条已完成的工作量.如果没有value属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).

Note: 你可以使用orient属性来指定该进度条的显示方向是横向(默认)还是纵向.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

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.

相关链接

• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-ms-fill
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element