<progress>:进度指示元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

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

尝试一下

使用上下文

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

属性

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

max

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

value

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

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

DOM 接口

该元素实现了HTMLProgressElement接口。

示例

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

结果

规范

Specification
HTML
# the-progress-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
progress
max
value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见