Progress Bars
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.
Basic
You can create a progress bar using minimal markup.
HTML
<div class="progress">
<span class="meter"></span>
</div>
Rendered HTML
Advanced
Additional classes can be added to your progress bar to change its appearance.
HTML
<div class="progress [small-# large-#] [secondary alert success] [radius round]">
<span class="meter" style="width: [1 - 100]%"></span>
</div>
Rendered HTML
Customize With Sass
Progress bars can be easily customized using our provided Sass variables.
SCSS
$include-html-media-classes: $include-html-classes;
// We use this to se the prog bar height
$progress-bar-height: rem-calc(25);
$progress-bar-color: transparent;
// We use these to control the border styles
$progress-bar-border-color: scale-color(#fff, $lightness: 20%);
$progress-bar-border-size: 1px;
$progress-bar-border-style: solid;
$progress-bar-border-radius: $global-radius;
// We use these to control the margin & padding
$progress-bar-pad: rem-calc(2);
$progress-bar-margin-bottom: rem-calc(10);
// We use these to set the meter colors
$progress-meter-color: $primary-color;
$progress-meter-secondary-color: $secondary-color;
$progress-meter-success-color: $success-color;
$progress-meter-alert-color: $alert-color;
Semantic Markup With Sass
You can create your own progress bars using our Sass mixins.
Basic
You can use the progress-container()
and progress-meter()
mixin to create your own progress bars, like so:
Container Mixin
SCSS
.custom-progress-container {
@include progress-container();
}
HTML
<div class="custom-progress-container"></div>
Meter Mixin
SCSS
.custom-progress-container { @include progress-container;
& > span { @include progress-meter($bg); }
}
Advanced
You can further customize your progress bars using the provided options in the progress-bar()
mixin:
Adding Border Radius
We can add a border radius to our progress bar through our mixins:
SCSS
.custom-progress-container {
@include progress-container;
@include radius(6px);
& > span {
@include progress-meter(pink);
@include radius(5px);
}
}
Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/progress-bars";