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 set 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 and 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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »