--- title: Progress Bar description: 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. video: gMLSHzlshpM sass: - scss/components/_progress-bar.scss - scss/forms/_progress.scss - scss/forms/_meter.scss --- ## 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

edit on codepen button
```html_example
``` Add a `width` CSS property to the inner meter to fill the progress bar. ```html_example
``` --- ## Colors A progress bar can be styled with the `.secondary`, `.success`, `.warning`, and `.alert` colors.

Watch this part in video

edit on codepen button
```html_example
``` --- ## 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

edit on codepen button
```html_example
25%
``` --- ## Native Progress As an alternative to our custom progress bar style, you can also opt to use the native `` element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. [View `` element support.](https://caniuse.com/#feat=progress) ```html_example ``` If you're using the Sass version of Foundation, add this line to your main Sass file to export the `` CSS: ```scss @include foundation-progress-element; ``` The `` element can be styled with the same coloring classes: `.secondary`, `.success`, `.warning`, and `.alert`. ```html_example ``` --- ## Native Meter For the *extra* adventurous developers out there, we also provide styles for the `` element. What's the difference? `` represents a value that changes over time, like storage capacity. `` represents a value that fluctuates around some optimum value. It also has *no* support in Internet Explorer, Mobile Safari, or Android 2. [View `` element support.](https://caniuse.com/#search=meter) If you're using the Sass version of Foundation, add this line to your main Sass file to export the `` CSS: ```scss @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 `` values.](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Meters_and_progress_bars) ```html_example ``` --- ## 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 ```