Onsen UI Progress Bar CSS Components

Last Updated : 07 Jul, 2022

Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and Android design standards. Onsen UI was created with AngularJS in mind, but it can also be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova JavaScript Framework.

The Onsen UI Progress Bar is used to create a basic progress bar on a web page. It can be used to create an animated infinite looping progress bar that shows that an operation is in progress

Onsen UI Progress Bar CSS Components:

Basic Progress Bar: This component contains the various classes that can be used to create the simple & basic progress bar.
Material Progress Bar: This component contains the classes that can be used to create the Material Progress Bar.

Syntax:

<element-name class="Progress-Bar-Component-Class">
    ...
</element-name>

Example 1: In the below example, we will make use of the Progress Bar Basic class to make a progress bar.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI Progress Bar CSS Components 
        </h3> 
        <div class="progress-bar"> 
            <div class="progress-bar__primary" 
                 style="width: 30%"> 
            </div> 
        </div> 
        <br /> 
        <div class="progress-bar"> 
            <div class="progress-bar__primary" 
                 style="width:20%"> 
            </div> 
            <div class="progress-bar__secondary" 
                 style="width:76%"> 
            </div> 
        </div> 
    </center> 
</body> 
</html>

Output:

Example 2: In the below example, we will make use of the Material Progress Bar class to make a progress bar.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI Progress Bar CSS Components 
        </h3> 
        <br> 
        <div class="progress-bar"> 
            <div class="progress-bar progress-bar--indeterminate"></div> 
        </div> 
        <br> 
        <div class="progress-bar progress-bar--material"> 
            <div class="progress-bar__secondary" 
                 style="width:78%;"> 
            </div> 
        </div> 
    </center> 
</body> 
</html>