- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
The new progress element is for tracking the status and completion of a task. It could be used to display the progress of a download – downloading a file, or loading in data from an AJAX call for example.
There are two optional attributes for the progress element: value and max.
The value attributes represents how much of the task has been completed.
The max attribute represents the total amount required to complete the task. Both the value and max contents should be displayed inside the progress element so the user has feedback on the completion state.
<p>You are downloading a very important file, please wait.</p> <progress value="45" max="100"><span>45</span>% complete</progress>
In Chrome the above code would give you the screenshot in Figure 2.5 (the progress bar also glows as well, which is a nice little touch):
Figure 2.5 The progress element in Chrome
In browsers with less support for progress, you get the result in Figure 2.7 (screenshot from Firefox 3.6)
Figure 2.6 The fallback display for browsers that do not support the progress element
The idea behind this is that the green bar, or the text visual, would update live so the user knows exactly what is going on.