Foundation Progress Bar

The Foundation Progress Bar can be used to display the progress of a program:

We can create a progress bar using the .progress class within a <div> element, and the .meter class for the child element (<span>). We can set the progress percentage within the <span> element as follows:

Example

<div class="progress">  <span class="meter" 
    style="width:70%"></span></div>

Progress Bar Colors

By default, the progress bar is blue. Different color classes are: .secondary, .success, or .alert:

Example

<div class="progress">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    secondary">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    success">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    alert">  <span class="meter" 
    style="width:50%"></span></div>

Rounded Progress Bar

The .radius and .round classes are used to add rounded corners to the progress bar:

Example

<div class="progress">  <span class="meter" 
        style="width:50%"></span></div><div class="progress radius">  <span 
        class="meter" style="width:50%"></span></div><div 
        class="progress round">  <span class="meter" 
        style="width:50%"></span></div>

Progress Bar Size

You can modify the width of the progress bar using .small- or .large-, where num is a number between 1 (8.33%) and 12 (default (100%)):

Example

<div class="progress large-1">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    large-6">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    large-9">  <span class="meter" 
    style="width:50%"></span></div>&lt;div class="progress 
    large-11">  <span class="meter" 
    style="width:50%"></span></div>&lt;!-- 
    Default width -->&lt;div class="progress 
    large-12">  <span class="meter" 
    style="width:50%"></span></div>

Progress Bar Labels

You can add labels to the progress bar using CSS. In the following example, we add a <span> element to display the percentage:

Example

<style>.percentage {  position: absolute;  top: 50%;  left: 
        50%;  color: 
        white;   transform: translate(-50%, -50%);  font-size: 12px;}</style>
        <div class="progress">  <span class="meter" 
        style="position:relative;width:75%">    <span 
        class="percentage">75%</span>  </span></div><div 
        class="progress success">  <span class="meter" 
        style="position:relative;width:50%">    <span 
        class="percentage">50%</span>  </span></div><div 
        class="progress alert">  <span class="meter" 
        style="position:relative;width:25%">    <span 
        class="percentage">25%</span>  </span></div>