Foundation CSS Progress Bar with Text

Last Updated : 07 Mar, 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. It helps us to visualize how much of the process is complete and how much is left. For this, the percentage is used to display the amount of completion.

Foundation CSS Progress Bar with Text classes:

progress: This class should be applied to a container. It holds all the progress bar elements.
progress-meter: This class displays the current progress. The current progress depends on the width of the element.
progress-meter-text: This class displays the value of the current progress.

Foundation CSS Progress Bar Class attributes:

aria-valuemin: The minimum value which can be taken by the progress bar.
aria-valuemax: The maximum value which can be taken by the progress bar.
aria-valuenow: The current value of the progress bar.
aria-valuetext: It indicates the human-readable version of the progress bar, in case the progress bar value, is not numeric.

Syntax:

<div class="progress" role="progressbar">
    <span class="progress-meter">
        <span class="progress-meter-text">Percentage</span>
    </span>
</div>

Example 1: Basic example illustrating a progress bar with text in Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Progress Bar with Text</title>
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <title>
        Foundation CSS Progress Bar with Text
    </title>
</head>

<body class="grid-container">
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Progress Bar with Text </h4>
    <div class="success progress" 
         role="progressbar" 
         aria-valuenow="50" 
         aria-valuemin="0" 
         aria-valuetext="50 percent" 
         aria-valuemax="100" 
         style="margin-top: 50px;"> 
        <span class="progress-meter" 
              style="width: 50%">
            <span class="progress-meter-text">50%</span> 
        </span>
    </div>
</body>

</html>

Output:

Example 2: This example describes the animated progress bar with text in Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Progress Bar with Text</title>
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" 
          crossorigin="anonymous">
    </script>
    <title>Foundation CSS Progress Bar with Text</title>
</head>

<body class="grid-container">
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Animated Progress Bar with Text </h4>
    <div class="success progress" 
         role="progressbar" 
         aria-valuenow="50" 
         aria-valuemin="0" 
         aria-valuetext="50 percent" 
         aria-valuemax="100"> 
        <span class="progress-meter" style="width: 50%">
            <span class="progress-meter-text">50%</span>
        </span>
    </div>
    <script>
        const recur = () => {
            let value = 0;
            const progressBar = document.querySelector(".progress");
            const progressMeter = document.querySelector(".progress-meter");
            const progressText = document.querySelector(".progress-meter-text");
            setInterval(() => {
                progressBar.ariaValueNow = value;
                progressBar.ariaValueText = value + "percent";
                progressMeter.style.width = value + "%";
                progressText.innerHTML = value + "%";
                value = (value + 1) % 100;
                console.log(value)
            }, 50)
        }
        recur();
    </script>
</body>

</html>

Output:

References: https://get.foundation/sites/docs/progress-bar.html#with-text

Foundation CSS Progress Bar with Text

tejsidda34

Improve

Article Tags :

Foundation CSS Progress Bar with Text

Similar Reads

Thank You!

What kind of Experience do you want to share?