w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



progress ... ⁄progress, display in browser

Browser display, progress element


Video demonstration progress element, view in browser

HTML5 progress, browser display, Tutorial

min video details
00:03 video tutorial: testing the browser display of the progress element
00:09 empty (start tag, end tag only) progress element: displays a pulsating light green line on the horizontal gray bar in browser (Windows7 OS)
00:18 the content of a progress element (between the start tag and the end tag) represents fallback content and displays only in browsers that don't support the progress element (e.g. IE9)
00:23 Google Chrome supports progress element → fallback content does not display, the progress element displays instead
00:30 Internet Explorer9 does not support progress element → the fallback content displays
00:36 the progress element showing the progress of a task, maximum 200; when it will reach the value of 200, the progress will be completed, the task will be finalized (we used javascript for this) display: a progressive green line on the horizontal gray bar
01:03 value attribute present, the value is 0.2 out of 1 (1= the value of the max attribute when absent) → display: a green line of 0.2 out of 1 or 20% (1 represents the whole horizontal bar) (a determinate progress)
01:09 the representation of 0.2 out of 1
01:15 another determinate progress: both value and max attributes are present
display: 80% (60 out of 75) of the gray horizontal progress bar will display in green, representing the value of the value attribute out of the maximum value
01:23 the representation of 60 out of 75
progress intro progress parents - children progress fallback contentprogress syntaxprogress value attributeprogress max attribute