HTML5 and CSS3, Second Edition

That gradient syntax is a little complex and we’ll talk about it in more detail

in Chapter 8, Eye Candy, on page 151. Once we’ve styled the fill, we need to

place the label for the dollar amount inside of the bar.

html5_meter/stylesheets/style.css

.label{

position:absolute;

right:0;

top:0;

z-index:1000;

}

We’re absolutely positioning the label inside of the bar. It will sit on a layer

above the fill. Our finished fallback meter looks like the following figure.

Figure 4—Our fallback meter

Users without JavaScript enabled will still see the content we placed within

the opening and closing meter element, which means we have to be mindful

of what we place there.

Progress Bars

If you need to implement an upload progress bar in a web application, you

should investigate the <progress> tag introduced in HTML5.

The <progress> tag is similar to <meter>, but it’s designed to show active progress

like you’d see if you were uploading a file (rather than a measurement that’s

not currently moving, like a snapshot of available storage on the server for a

given user). The markup for a progress bar is very similar to the <meter> tag.

html5_meter/progress.html

<progressid="progressbar"min="0"max="100"value="0"></progress>

Like <meter>, <progress> isn’t supported by all browsers yet, To support it, you

use JavaScript to grab the values in the meter and build your own visualiza-

tion. Or you can use the HTML5-Progress polyfill by Lea Verou.^3

3. http://lea.verou.me/polyfills/progress/

report erratum • discuss

Showing Progress toward a Goal with the Element • 29

Download from Wow! eBook <www.wowebook.com>