Open In App

Onsen UI CSS Component Basic Progress Bar

Improve
Improve
Like Article
Like
Save
Share
Report

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. If a percent is given, then it would display the amount of work that has been completed. This is done using <ons-progress-bar> component.

Syntax:

<ons-progress-bar value="" | 
    secondary-value=" " | indeterminate>
<ons-progress-bar>

Attributes:

  • value: This is used to set the current progress. It is of the type number and ranges from 0 to 100.
  • secondary-value: This shows current secondary progress. The Input ranges from 0 to 100.
  • indeterminate: This is used to specify if the progress bar has no fixed progress value. An infinite looping animated progress bar will be displayed if this is enabled.

Example 1: In this example, we will see the difference between progress bars having a single value and a completion value.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <ons-page>
        <ons-toolbar>
            <div class="center">Progress</div>
        </ons-toolbar>
  
        <div style="margin: 20px auto; width: 320px;">
            <p>Progress Bar 1</p>
            <!-- This will create a progress bar
                whose progress is at 30%  -->
            <ons-progress-bar value="30">
            </ons-progress-bar>
  
            <p>Progress Bar 2</p>
            <!-- This will create a progress bar whose
                current progress is 30 and secondary
                current progress is 70-->
            <ons-progress-bar value="30" 
                              secondary-value="70">
            </ons-progress-bar>
        </div>
    </ons-page>
</body>
  
</html>


Output:

 

Example 2: In this example, we will see the difference between determinate and indeterminate progress bars.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <ons-page>
        <ons-toolbar>
            <div class="center">Progress</div>
        </ons-toolbar>
  
        <div style="margin: 20px auto; width: 320px;">
            <p>Progress Bar 1</p>
            <!-- This will create a progress bar whose
                current progress is 30 and secondary
                current progress is 70-->
                <ons-progress-bar value="30" 
                                  secondary-value="70">
                </ons-progress-bar>
  
            <p>Progress Bar 2</p>
            <!-- This will create a progress bar whose
                current progress is indeterminate -->
            <ons-progress-bar indeterminate>
            </ons-progress-bar>
        </div>
    </ons-page>
</body>
  
</html>


Output:

 

Reference: https://onsen.io/v2/api/js/ons-progress-bar.html



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads