5.6 KiB
| title | description | video | sass | |||
|---|---|---|---|---|---|---|
| Progress Bar | Show your progress. A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize. | gMLSHzlshpM |
|
Basics
A progress bar has two elements: the container .progress, and the meter .progress-meter. The role and aria- attributes in the code example clarify the status of the bar:
aria-valuemin: Minimum value.aria-valuemax: Maximum value.aria-valuenow: Current value.
If the value of the progress bar is not numeric, also add the attribute aria-valuetext, which should include a human-readable version of the bar's value.
Watch this part in video
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-meter"></div>
</div>
Add a width CSS property to the inner meter to fill the progress bar.
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
<div class="progress-meter" style="width: 50%"></div>
</div>
Colors
A progress bar can be styled with the .secondary, .success, .warning, and .alert colors.
Watch this part in video
<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
<div class="progress-meter" style="width: 25%"></div>
</div>
<div class="success progress">
<div class="progress-meter" style="width: 50%"></div>
</div>
<div class="warning progress">
<div class="progress-meter" style="width: 50%"></div>
</div>
<div class="alert progress">
<div class="progress-meter" style="width: 75%"></div>
</div>
With Text
You can add text inside the meter of a progress bar. Make sure the text you use in the meter is also used in the aria-valuetext attribute.
Watch this part in video
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
<span class="progress-meter" style="width: 25%">
<p class="progress-meter-text">25%</p>
</span>
</div>
Native Progress
As an alternative to our custom progress bar style, you can also opt to use the native <progress> element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. View <progress> element support.
<progress max="100" value="75"></progress>
If you're using the Sass version of Foundation, add this line to your main Sass file to export the <progress> CSS:
@include foundation-progress-element;
The <progress> element can be styled with the same coloring classes: .secondary, .success, .warning, and .alert.
<progress class="secondary" max="100" value="75"></progress>
<progress class="success" max="100" value="75"></progress>
<progress class="warning" max="100" value="75"></progress>
<progress class="alert" max="100" value="75"></progress>
Native Meter
For the extra adventurous developers out there, we also provide styles for the <meter> element. What's the difference? <progress> represents a value that changes over time, like storage capacity. <meter> represents a value that fluctuates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter> element support.
If you're using the Sass version of Foundation, add this line to your main Sass file to export the <meter> CSS:
@include foundation-meter-element;
The meter automatically colors itself based on the current values, and the defined low, medium, and high ranges. Learn more about the mechanics of <meter> values.
<meter value="30" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="50" min="0" low="33" high="66" optimum="100" max="100"></meter>
<meter value="100" min="0" low="33" high="66" optimum="100" max="100"></meter>