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.

<div class="progress">
  <span class="meter"></span>
</div>

Advanced

Additional classes can be added to your progress bar to change its appearance.

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

Stacked

Progress bars can be stacked.

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

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