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 = "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 > < 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 = "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 > < 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
Contact Us