Onsen UI CSS Component Material Progress Bar

Last Updated : 07 Jul, 2022

Onsen UI is a free open-source HTML5 framework that allows you to create unique and usable user interfaces (UI). It also simplifies UI development, allowing programmers to concentrate on the program’s functionality. Onsen UI is a sophisticated set of user interface components created exclusively for mobile apps and filled with ready-to-use features that adhere to native iOS and Android design standards. Onsen UI was designed to work with AngularJS, but it may also be used with jQuery or any other framework. Onsen UI is a JavaScript Framework for PhoneGap and Cordova.

Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs easier for developers.

The Material Progress Bar contains the class that is used to create an attractive progress bar, in order to enhance the overall user experience on the website.

Onsen UI CSS Component Material Progress Bar Classes:

progress-bar: This class is added to a div element to make it a progress bar.
progress-bar–material: This class is added with the progress-bar class to make it in material style.
progress-bar__primary: This class is added to give a dark color to the progress bar which normally represents how much of the bar is actually progressed.
progress-bar–material__primary: This class is added to give a dark color to the progress bar in the material-type design which normally represents how much of the bar is actually progressed.
progress-bar__secondary: This class is added to give a lighter color to the progress bar which normally represents how much of the bar is yet to progress.
progress-bar–material__secondary: This class is added to give a lighter color to the progress bar which normally represents how much of the bar is yet to progress in material type design style.
progress-bar–indeterminate: This class is added to have an infinitely looping progress bar.

Example 1: This example demonstrates a material progress bar using Onsen UI.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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">
</head>
 
<body>
    <div style="margin: 3rem;
                font-family: Roboto, sans-serif;">
        <h1 style="color: green;">
          GeeksforGeeks
        </h1>
        <h3 style="margin-top: -1.5rem;">
            Onsen UI CSS Component Material Progress Bar
        </h3><br />
    </div>
    <h4 style="margin-left: 3rem">
      Loading DSA...
     </h4>
    <div style="margin-left: 3rem;
                height: 0.4rem;" 
         class="progress-bar progress-bar--material">
        <div class="progress-bar__primary 
                    progress-bar--material__primary"
             style="width:15%">
          </div>
        <div class="progress-bar__secondary 
                    progress-bar--material__secondary"
             style="width:40%">
       </div>
    </div>
</body>
</html>

Output:

Example 2: The example demonstrates an indeterminate/infinite looping progress bar using Onsen UI.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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">
</head>
 
<body>
    <div style="margin: 3rem; 
                font-family: Roboto, sans-serif;">
        <h1 style="color: green;">
          GeeksforGeeks
        </h1>
        <h3 style="margin-top: -1.5rem;">
            Onsen UI CSS Component Material Progress Bar
        </h3><br />
    </div>
    <h4 style="margin-left: 18rem">
      Loading...
      </h4>
    <div style="margin: 3rem; 
                width: 40%;" 
         class="progress-bar 
                progress-bar--material 
                progress-bar--indeterminate">
    </div>
</body>
</html>