directory search
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
characters

在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")

例子

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

结果

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

其他例子

See -moz-orient.

规范

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

Previous article: Next article: