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

Stacked

Progress bars can be stacked.

HTML

<div class="progress [small-# large-#] [radius round]"> <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span> <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span> <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span> </div>

Rendered HTML


Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.


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";




Building Blocks Using Progress Bars


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

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