Foundation CSS Progress Bar

Last Updated : 09 Feb, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

A progress bar is used to display the progress of a process. A progress bar helps us to visualize how much of the process is complete and how much is left. We can add a progress bar on a web page using predefined Foundation CSS classes. To add a progress bar using Foundation CSS, we use the “progress” class to create a progress container and the “progress-meter” class to create a progress bar.

Syntax:

<div class="progress">
    <div class="progress-meter" style="width:20%">
        ...
    </div>
</div>

Example: This example illustrates a basic progress bar using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
</head> 
  
<body> 
    <center> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <strong>Foundation CSS Progress bar</strong><br/> 
    </center>  
    <div class="progress"> 
        <div class="progress-meter" style="width: 50%"></div> 
    </div> 
    <div class="progress"> 
        <div class="progress-meter" style="width: 70%"></div> 
    </div> 
</body> 
  
</html> 

Output:

Labeled Progress Bar:

The labeled progress bar is used to display the text inside the progress bar to show the task completion percentage. To add a label to the progress bar we use an <span> element with progress-meter-text class.

Syntax:

<div class="progress">
    <div class="progress-meter" style="width:40%">
        <span class="progress-meter-text">
            ...
        </span>
    </div>
</div>

Example: This example illustrates a basic progress bar with labels made using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
</head> 
  
<body> 
    <center> 
      <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
      <strong>Foundation CSS Progress bar</strong><br/> 
    </center>  
    <div class="progress"> 
        <div class="progress-meter" style="width: 50%"> 
           <span class="progress-meter-text">50%</span> 
        </div> 
    </div> 
    <div class="progress"> 
        <div class="progress-meter" style="width: 70%"> 
           <span class="progress-meter-text">70%</span> 
        </div> 
    </div>      
</body> 
</html> 

Output:

Colored Progress Bars: We can use contextual color classes of foundation CSS to set the color of the progress bar. The default color of the progress bar is blue. Following are the five types of color classes available in Foundation CSS.

primary
secondary
success
alert
warning

Syntax:

<div class="primary progress">
    <div class="progress-meter" style="width:30%">
        ...
    </div>
</div>

Example: The following is an example showing all contextual color progress bars made using Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head>     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
</head> 
  
<body> 
    <center> 
      <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
      <strong>Foundation CSS Progress bar</strong><br/> 
    </center>  
    <div class="primary progress"> 
        <div class="progress-meter" style="width: 50%"> 
            <span class="progress-meter-text">Primary</span> 
        </div> 
    </div> 
    <div class="secondary progress"> 
        <div class="progress-meter" style="width: 70%"> 
            <span class="progress-meter-text">Secondary</span> 
        </div> 
    </div> 
    <div class="success progress"> 
        <div class="progress-meter" style="width: 80%"> 
            <span class="progress-meter-text">Success</span> 
        </div> 
    </div> 
    <div class="alert progress"> 
        <div class="progress-meter" style="width: 90%"> 
            <span class="progress-meter-text">Alert</span> 
        </div> 
    </div> 
    <div class="warning progress"> 
        <div class="progress-meter" style="width: 100%"> 
            <span class="progress-meter-text">Warning</span> 
        </div> 
    </div>      
</body> 
</html> 