index.md

title	slug
<progress>：进度指示元素	Web/HTML/Element/progress

{{HTMLSidebar}}

概述

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

{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}

使用上下文

内容分类	流式内容、短语内容、可关联标签内容、可感知内容。
允许的内容	可感知内容，但其后代元素不能有 <progress> 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	接受可感知内容的任何元素。
隐式 ARIA 角色	progressbar
允许的 ARIA 角色	没有允许的角色（role）
DOM 接口	{{domxref("HTMLProgressElement")}}

属性

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

• max
  • : 该属性描述了这个progress元素所表示的任务一共需要完成多少工作。
• value
  • : 该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).

Note

你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条。

DOM 接口

该元素实现了HTMLProgressElement接口。

示例

<progress value="70" max="100">70 %</progress>

结果

{{ EmbedLiveSample("示例", 200, 50) }}

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

• {{htmlelement("meter")}}
• {{ cssxref(":indeterminate") }}
• {{ cssxref("-moz-orient") }}
• {{ cssxref("::-moz-progress-bar") }}
• {{ cssxref("::-webkit-progress-bar") }}
• {{ cssxref("::-webkit-progress-value") }}
• {{ cssxref("::-webkit-progress-inner-element") }}