Onsen UI CSS Component Basic Progress Bar
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 >
< ons-progress-bar value = "30" >
</ ons-progress-bar >
< p >Progress Bar 2</ p >
< 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 >
< ons-progress-bar value = "30"
secondary-value = "70" >
</ ons-progress-bar >
< p >Progress Bar 2</ p >
< 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
Share your thoughts in the comments
Please Login to comment...