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.

Build With Predefined HTML Classes

There are two ways to add progress bars labels in Foundation 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <div class="progress"> and inside of that a <span class="meter">. The meter is the element that you can set a width to, either inline or programmatically on your own accord. The simplest way to do this is to change the style="width:%" property on the meter, itself.

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

The class options:

  • The color classes include: .secondary, .alert or .success
  • The radius classes include: .radius or .round.
  • You may also you the grid width classes: .small-# or .large-#
<div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default HTML page structure.

Build with our Mixins

We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _progress-bars.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/progress-bars";
Container Mixin

Progress bars are made from a container and a meter. The container element holds most of the styles that come across and holds the meter, itself. You can create progress bars by creating a <div> and giving it a unique class or ID, then applying the mixin styles to it.

.your-class-name { @include progress-container; }
Meter Mixin

The next step is to include an element inside of your container that will be styled as the meter.

.your-class-name { @include progress-container;
  & > span { @include progress-meter($bg); }

/* We can set the background color of the meter to a variable or any color value */
$bg: $primary-color
Adding Border Radius

Like we mentioned on a few of the other component pages, you have access to some global mixins that can add even more style to elements like this. Here's an example of using border radius:

.your-class-name {
  @include progress-container;
  @include radius(6px);
  & > span {
    @include progress-meter(pink);
    @include radius(5px);
Default SCSS Variables
$include-html-media-classes: $include-html-classes;

/* We use this to se the prog bar height */
$progress-bar-height: em-calc(25);
$progress-bar-color: transparent;

/* We use these to control the border styles */
$progress-bar-border-color: darken(#fff, 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: em-calc(2);
$progress-bar-margin-bottom: em-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;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video