---
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.
-sass: scss/components/_progress-bar.scss
+sass:
+ - scss/components/_progress-bar.scss
+ - scss/forms/_progress.scss
+ - scss/forms/_meter.scss
---
## Basics
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group meter
+////
+
+/// Height of a `<meter>` element.
+/// @type Length
$meter-height: $progress-height !default;
+
+/// Border radius of a `<meter>` element.
+/// @type Length
$meter-radius: $progress-radius !default;
+
+/// Background color of a `<meter>` element.
+/// @type Color
$meter-background: $progress-background !default;
+
+/// Meter fill for an optimal value in a `<meter>` element.
+/// @type Color
$meter-fill-good: $success-color !default;
+
+/// Meter fill for an average value in a `<meter>` element.
+/// @type Color
$meter-fill-medium: $warning-color !default;
+
+/// Meter fill for a suboptimal value in a `<meter>` element.
+/// @type Color
$meter-fill-bad: $alert-color !default;
@mixin foundation-meter-element {
@if has-value($meter-radius) {
border-radius: $meter-radius;
}
- }
+ }d
&::-webkit-meter-even-less-good-value {
background: $meter-fill-bad;
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group slider
+////
+
/// Default height of the slider.
/// @type Number
$slider-height: 0.5rem !default;