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.

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" 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" 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" 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" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <span class="progress-meter" style="width: 25%">
    <span class="progress-meter-text">25%</span>
  </span>
</div>

25%

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>

Screen Readers

Test the progress bar with different aria-valuenow values in a couple of screen readers. The screen reader behavior may not be always obvious.

If the value of the progress bar is numeric, make sure the range is defined correctly (extracting aria-valuemin from aria-valuemax defines the full range). For percentage progress bars (0-100%) the value range is typically 100 (aria-valuemin="0" and aria-valuemax="100"). Most screen readers will calculate the announced percentage based on these numbers with the following formula:

aria-valuenow / (aria-valuemax - aria-valuemin) = announced percentage

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$meter-height`	Length	`1rem`	Height of a `<meter>` element.
`$meter-radius`	Length	`$global-radius`	Border radius of a `<meter>` element.
`$meter-background`	Color	`$medium-gray`	Background color of a `<meter>` element.
`$meter-fill-good`	Color	`$success-color`	Meter fill for an optimal value in a `<meter>` element.
`$meter-fill-medium`	Color	`$warning-color`	Meter fill for an average value in a `<meter>` element.
`$meter-fill-bad`	Color	`$alert-color`	Meter fill for a suboptimal value in a `<meter>` element.
`$progress-height`	Number	`1rem`	Height of a progress bar.
`$progress-background`	Color	`$medium-gray`	Background color of a progress bar.
`$progress-margin-bottom`	Number	`$global-margin`	Bottom margin of a progress bar.
`$progress-meter-background`	Color	`$primary-color`	Default color of a progress bar's meter.
`$progress-radius`	Number	`$global-radius`	Default radius of a progress bar.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

progress-container

@include progress-container;

Adds styles for a progress bar container.

progress-meter

@include progress-meter;

Adds styles for the inner meter of a progress bar.

progress-meter-text

@include progress-meter-text;

Adds styles for text in the progress meter.