W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

progress ... ⁄progress

Share it

progress intro progress browser display progress parents - children progress fallback contentprogress syntaxprogress value attributeprogress 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:

About progress

Display & support progress

Firefox iconChrome iconIE icon10Opera iconSafari icon6

Parents, children progress

Attributes progress


Provide fallback content for the progress element. »video


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)

<progressattribute="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: W3CWHATWG