<%= @page_title %>

A simple way to add a 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.

<%= code_example ' ', :html %>

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

<%= code_example ' ', :html %>

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:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/progress-bars"; ', :css %>

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.

<%= code_example ' .your-class-name { @include progress-container; }', :css %>

Meter Mixin

The next step is to include an element inside of your container that will be styled as the meter. <%= code_example ' .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 ', :css %>

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:

<%= code_example ' .your-class-name { @include progress-container; @include radius(6px); & > span { @include progress-meter(pink); @include radius(5px); } }', :css %>

Default SCSS Variables

<%= code_example ' /* We use this to se the prog bar height */ $progress-bar-height: emCalc(25px); /* 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: emCalc(2px); $progress-bar-margin-bottom: emCalc(10px); /* We use these to set the meter colors */ $progress-bar-color: transparent; $progress-meter-color: $primary-color; $progress-meter-secondary-color: $secondary-color; $progress-meter-success-color: $success-color; $progress-meter-alert-color: $alert-color;', :css %>

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