Foundation
Jump to Nav

# 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.

    <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.

    <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.

    <div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" 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>

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>

## 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.