O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Progress bars

The progress bar component gives you a way to visually show a measure of completeness for some task or activity. It is useful as a single snapshot of progress. If you want it to update in real time as a task progresses, you will need to find a way to do that as there is no built-in JavaScript to do that.

This component includes two new classes: progress and meter. Use progress as the container and meter for the shaded bar inside it. For simplicity, the following is the progress bar's basic form:

<div class="progress"><span class="meter"></span></div>

The following is the output generated from the preceding code:

Progress bars

The progress <div> is a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required