Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 13

You need to replace the example image with one you already have to get the page
to render correctly. However, the essence of what you achieve with the <igcaption > and
<igure> elements should be clear.
Using the <progress> element
The <progress> element represents the progress of an objective or task. The two supported
types of progress tasks are determinate and indeterminate .
Use a determinate progress task when you know in advance the amount of work to be
completed; in other words, you know the starting and ending values. Sample scenarios for
this case include downloading a file for which you know the exact size or displaying the
progress of a fundraising effort. In both situations, you know the exact status of the task at
any particular time, and you also know what the end goal is—either the number of bytes for
the file download or the number of dollars for the fundraiser. In these determinate cases, you
can specify HTML5 markup such as this:
<p>Our goal is to have 1000 users:</p>
<span>0</span>
<progress value="50" max="1000"></progress>
<span>1000</span>
The result of this HTML is the progress bar shown in Figure 1-9.
FIGURE 1-9 Using the <progress> element to show progress toward a total
As shown in the preceding code, the <progress> element has two attributes you need to
know: value and max . The value attribute lets you specify the current value or position of the
<progress> element at a specific point in time. The max attribute tells the browser what the
maximum possible value is for the element. The browser uses these two values to determine
how much of the element should be colored in. Usually, the value attribute updates dynami-
cally using JavaScript. In Figure 1-10, you can see how the <progress> element's display
changes when the value attribute is updated to 750.
FIGURE 1-10 The effect of the value attribute on the <progress> element