progress ... ⁄progress, display in browser
Browser display, progress element
- empty progress element (start tag, end tag only): displays a pulsating light green line on the horizontal gray bar
- its children, phrasing content (fallback content): displays in browser that do not support the progress element
- the progress element (+ javascript): a progressive green line on the horizontal gray bar; progress bar in action
- the value of the value attribute of a progress element: displays in green on the progress bar
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 |