首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

progress

HTML5中引入

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

内容类别

Flow content, phrasing content, labelable content, palpable content.

允许的内容

Phrasing content ,但其后代中不得有<progress>元素。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受 phrasing content 的元素。

允许ARIA角色

没有

DOM界面

HTMLProgressElement

属性

这个元素包含全局属性。

max该属性描述progress元素指示的任务需要多少工作。该max属性(如果存在)必须具有大于零的值并且是有效的浮点数。默认值是1.

value此属性指定已完成多少任务。它必须是0 max到0 之间的有效浮点数,如果max省略,则在0和1之间。如果没有value属性,进度条是不确定的; 这表明活动正在进行,没有迹象表明预计会花多长时间。

注:最小值始终为0,并且min属性不允许用于progress元素。您可以使用-moz-orientCSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。

注::indeterminate伪类可用于匹配不确定进度条。在给它一个值之后,要将进度条更改为不确定的,你必须使用删除值属性element.removeAttribute("value")

例子

代码语言:javascript
复制
<progress value="70" max="100">70 %</progress>

结果

在Windows 7上,生成的进度如下所示:

其他例子

规范

Specification

Status

Comment

HTML Living StandardThe definition of '<progress>' in that specification.

Living Standard

HTML5The definition of '<progress>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

6

(Yes)

61 2

10

11

5.2

max

6

(Yes)

6

10

11

5.2

value

6

(Yes)

6

10

11

5.2

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

61 2

No

11

73

max

(Yes)

(Yes)

(Yes)

6

No

11

7

value

(Yes)

(Yes)

(Yes)

6

No

11

7

扫码关注腾讯云开发者

领取腾讯云代金券