progress ... ⁄progress

Share it

progress intro progress browser display progress parents - children progress fallback content progress syntax progress value attribute progress max attribute

HTML5 progress element

The progress element allows you to represent, through a progress bar, the degree of progress of a task. »video
The progress can be:

- indeterminate (value attribute absent) or
- determinate (value attribute present)

About progress

is an optional element
multiple progress elements allowed per HTML5 document

Display & support progress

display in browser »video

₁₀

₆

Parents, children progress

progress nested within elements »progress parents
elements nested within progress »progress children
»examples

Attributes progress

required: none
optional: specific attributes, global attributes, event attributes

Recommendation

Provide fallback content for the progress element. »video

Warning

Do not use the progress element to represent a gauge, use the meter element for that.

Syntax progress

1	<progress> ... </progress> »video

Attributes and Values progress (comma separated)

<progress	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
1.	value	=	0, valid floating-point number	»video	<progress value="0.4"> ... <⁄progress>
2.	max	=	1, valid floating-point number	»video	<progress value="2" max="9"> ... <⁄progress>
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<progress accesskey="h"> ... </progress>
2.	class	=	class name	»html »img	<progress class="class_name"> ... </progress>
3.	contenteditable	=	"", , true, false	»html	<progress contenteditable="true"> ... </progress>
4.	contextmenu	=	menu id value	»html	<progress contextmenu="menu_id_value"> ... </progress>
5.	data-*	=	value	-	<progress data-http-error="404"> ... </progress>
6.	dir	=	ltr, rtl, auto	»html	<progress dir="ltr"> ... </progress>
7.	draggable	=	true, , false	»img	<progress draggable="false"> ... </progress>
8.	dropzone	=	copy, move, link, string:, file:	-	<progress dropzone="copy"> ... </progress>
9.	hidden	=	"", , hidden	»html »img	<progress hidden="hidden"> ... </progress>
10.	id	=	id name	»html »img	<progress id="unique_id_name"> ... </progress>
11.	itemid	=	URL	-	-
12.	itemprop	=	string	»link »a	-
13.	itemref	=	string	-	-
14.	itemscope	=	"", , itemscope	-	-
15.	itemtype	=	absolute URL	-	-
16.	lang	=	language code	»html »head »title »img	<progress lang="en"> ... </progress>
17.	spellcheck	=	"", , true, false	»html	<progress spellcheck="true"> ... </progress>
18.	style	=	CSS property:value	»html »img	<progress style="color:red"> ... </progress>
19.	tabindex	=	integer	»img	<progress tabindex="3"> ... </progress>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<progress title="html page"> ... </progress>
21.	translate	=	"", yes, no	»html »img	<progress translate="yes"> ... </progress>
	All Global Attributes
3. global event attributes
1.	onclick	=	script	» list	<element onclick="script" > ...
2.	ondblclick	=	script	» list	<element ondblclick="script" > ...
	All Event Attributes

Video demonstration progress element

HTML5 progress element: representation of a task in progress

min	video details
00:00	video tutorial: progress element
00:04	the progress element allows you to represent through a progress bar the degree of progress of a task
00:10	the progress element has a script attached, in our case, to be able to see the progress bar in action
00:17	our progress is indeterminate (value attribute is missing)
00:25	once we click on 'Download file' button, the download of a file starts, and we can see its download progress
00:32	download completed!

For more information about the progress element, please see the specs: W3C ⁄ WHATWG