Foundation CSS Kitchen Sink Progress Bar

Last Updated : 01 Mar, 2022

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

Kitchen Sink has the elements to work in websites and applications. Kitchen Sink Progress bar is used to show the progress using bar. It has two classes namely progress and progress-meter.

Used classes:

progress: It is used to create the progress bar.
progress-meter: It is used to show the meter by filling the bar.
progress-meter-text: It is used to display the text on the progress bar.

Syntax:

<div class="primary progress">
    ...
</div>

Example 1: Below example illustrates the use of Kitchen Sink Progress Bar using primary class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
  
    <script crossorigin="anonymous" src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
      Foundation CSS Kitchen Sink Progress bar 
    </h3> 
  
    <strong> 
      Primary progress bar: 
    </strong> 
  
    <div class="primary progress"> 
        <div class="progress-meter" style="width: 45%"> 
            <p class="progress-meter-text">45%</p> 
        </div> 
    </div> 
  
    <div class="primary progress"> 
        <div class="progress-meter" style="width: 85%"> 
            <p class="progress-meter-text">85%</p> 
        </div> 
    </div> 
  
    <div class="primary progress"> 
        <div class="progress-meter" style="width: 60%"> 
            <p class="progress-meter-text">60%</p> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

CSS Kitchen Sink Progress Bar.

Example 2: Below example illustrates the use of Kitchen Sink Progress Bar using primary, warning, alert, success classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link crossorigin="anonymous" rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
  
    <script crossorigin="anonymous" src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
      Foundation CSS Kitchen Sink Progress bar 
    </h3> 
  
    <strong>Primary progress bar:</strong> 
    <div class="primary progress"> 
        <div class="progress-meter" style="width: 56%"> 
            <p class="progress-meter-text">56%</p> 
        </div> 
    </div> 
  
  
    <strong>Warning progress bar:</strong> 
    <div class="warning progress"> 
        <div class="progress-meter" style="width: 25%"> 
            <p class="progress-meter-text">25%</p> 
        </div> 
    </div> 
  
    <strong>Alert progress bar:</strong> 
    <div class="alert progress"> 
        <div class="progress-meter" style="width: 18%"> 
            <p class="progress-meter-text">18%</p> 
        </div> 
    </div> 
  
    <strong>Success progress bar:</strong> 
    <div class="success progress"> 
        <div class="progress-meter" style="width: 96%"> 
            <p class="progress-meter-text">96%</p> 
        </div> 
    </div> 
</body> 
  
</html>