Foundation CSS Progress Bar Native

Last Updated : 10 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. 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.

Progress Bar represents the completeness of a task. It is very useful in websites to represent the progress of a particular work. In Foundation CSS, apart from the custom progress bar style, we can also use the native <progress> element.

Foundation CSS Progress Bar Attributes :

max: This attribute represents the maximum progress bar percentage.
value: This attribute represents the completion percentage.

Syntax:

<progress ...></progress>

Example 1: This example illustrates the Progress Bar in Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Progress Bar Native</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>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>     
</head>
<body>
    <h2 style="color:green;">GeeksforGeeks </h2>
    <progress max="100" value="50"></progress>
</body>
</html>

Output:

Example 2: This example illustrates the Progress Bar in Foundation CSS with different value attributes.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Progress Bar Native</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>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <style>      
        /* For Firefox */
        progress::-moz-progress-bar 
        {
            background: green;
        }
  
        /* For Chrome or Safari */
        progress::-webkit-progress-value {
            background: green;
        }
  
        /* For IE10 */
        progress {
            background: green;
        }
    </style>

</head>
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <label>25%</label>
    <progress max="100" value="25"></progress>
    <label>50%</label>
    <progress max="100" value="50"></progress>
    <label>75%</label>
    <progress max="100" value="75"></progress>
    <label>100%</label>
    <progress max="100" value="100"></progress>
</body>
</html>

Output:

Reference: https://get.foundation/sites/docs/progress-bar.html

Foundation CSS Progress Bar Native

rohit768

Improve

Article Tags :

Foundation CSS Progress Bar Native

Similar Reads

Thank You!

What kind of Experience do you want to share?