diff --git a/doc/includes/progress_bars/examples_progress_bars_stacked.html b/doc/includes/progress_bars/examples_progress_bars_stacked.html
new file mode 100644
index 0000000000..81c6958e16
--- /dev/null
+++ b/doc/includes/progress_bars/examples_progress_bars_stacked.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+```html
+
+
+
+
+
+```
+{{/markdown}}
diff --git a/doc/pages/components/progress_bars.html b/doc/pages/components/progress_bars.html
index b096564452..dfc11be5da 100644
--- a/doc/pages/components/progress_bars.html
+++ b/doc/pages/components/progress_bars.html
@@ -49,6 +49,25 @@ Rendered HTML
+Stacked
+
+Progress bars can be stacked.
+
+
+
+
HTML
+{{> examples_progress_bars_stacked}}
+
+
+
Rendered HTML
+
+
+
+
+
+
+
+
***
## Accessibility
diff --git a/scss/foundation/components/_progress-bars.scss b/scss/foundation/components/_progress-bars.scss
index 87f88ed832..65af4cdec3 100644
--- a/scss/foundation/components/_progress-bars.scss
+++ b/scss/foundation/components/_progress-bars.scss
@@ -47,6 +47,8 @@ $progress-meter-alert-color: $alert-color !default;
background: $bg;
display: block;
height: 100%;
+ float: left;
+ width: 0%;
}
@@ -60,6 +62,10 @@ $progress-meter-alert-color: $alert-color !default;
// Meter
.meter {
@include progress-meter;
+
+ &.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
+ &.success { @include progress-meter($bg:$progress-meter-success-color); }
+ &.alert { @include progress-meter($bg:$progress-meter-alert-color); }
}
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }