Post
Ask Question

Using Progress Bar Control In Onsen UI Using Visual Studio 2015

Before reading this article, please go through the article links, mentioned below.

Apache Cordova

Apache Cordova is an open-source project that aims to allow mobile developers to build applications for all the major mobile platforms, using HTML, CSS, and JavaScript technologies.

Monaca

Monaca is a software tool and service solution for building and deploying HTML5 mobile hybrid apps. It is built on top of an open-source Apache Cordova. Monaca provides a full suite of resources including Cloud IDE, local development tools, debugger, and back-end support.

Monaca's Cloud-based IDE builds HTML5 hybrid mobile apps for iOS, Android, Windows, and Chrome apps, using HTML, CSS, and JavaScript.

Monaca CLI provides Onsen UI templates, device debugger, remote building, and any service that you might need directly from your terminal.

Onsen UI Framework

Onsen UI is a front-end UI framework to develop cross-platform mobile apps, using Apache Cordova and PhoneGap. It’s fully independent of frameworks and you can easily plug these components into any project, regardless of JavaScript framework.

Onsen UI templates can be used with Visual Studio 2015. All the templates are compatible with Visual Studio Tools for Apache Cordova. It works pretty well with Windows Universal, iOS, and Android apps.

Building Progress Bar with Onsen UI Framework

A Progress Control provides feedback to the user about running the ongoing operation on the screen. So, the user cannot interact with the app when the progress indicator is visible, and can also indicate the waiting time.

  • Progress elements: <ons-progress-bar> and <ons-progress-circular>.
  • Progress Attributes: value, secondary-value, and indeterminate attribute.

Let’s see how to start building the app using Progress Bar in Onsen UI Framework, with the help of Visual Studio 2015.

Prerequisites

  • Visual Studio 2015.
  • Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below, to build an Onsen UI with Progress Bar Control, using Onsen UI Framework.

Step 1. Create an Onsen UI App.

Let’s be ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project Option for New Apache Cordova App, using Onsen UI Framework.

UI App

Step 2. Give the Project Name.

A New Project window will open. Select Installed -> Template -> JavaScript -> Manoca ->Onsen UI Blank app.

Type the Project name (Ex- Onsen UI Progress Bar) and click the OK button.

Project Name

The main screen is shown below.

Screen

After we create the project, our solution should resemble what is shown below.

Create the project

Step 3. This table gives the basic idea of how we might use each one.

File Why is it in your project?
Merge Folder It contains the package for Android, ios, and Windows apps.
www This file contains the images, library, and JS files
config.xml Contains the settings of our app
taco.json Defines which version of the Cordova CLI Visual Studio is used to build the project.

Step 4. Adding the Code

Go to the index.html in the Solution Explorer and add the HTML coding. We can add our own HTML coding in the <body> tag.

Code

Apply Progress Bar Control

Go to the index.html in the Solution Bar and add HTML code.

Explanation
 

Coding Explanation
<ons-page> Create a Page
<ons-toolbar> Add the Toolbar
<ons-progress-bar value="10"> Create the Progress Bar with 10%
<ons-progress-bar value="20" secondary-value="50"> Create the Progress Bar with Primary & Secondary values
<ons-progress-bar indeterminate> Create the Indeterminate Progress Bar
<ons-progress-circular value="10"> Create the Circular Progress Bar
<ons-progress-circular value="20" secondary-value="50"> Create the Circular Progress Bar with 20%
<ons-progress-circular indeterminate> Create the Indeterminate Circular Progress Bar

Coding

<ons-page>
    <ons-toolbar>
        <div class="center">Onsen Progress Bar</div>
    </ons-toolbar>
    <br /><br />
    <ons-progress-bar value="10">Loading with 10% </ons-progress-bar>
    <br /><br />
    <div style="margin: 20px auto; width: 320px;">
        <p>Loading with primary & secondary values Progress Bar...</p>
        <ons-progress-bar value="20" secondary-value="50"></ons-progress-bar>
    </div>
    <br />
    <p>Loading with Indeterminate Progress Bar</p>
    <ons-progress-bar indeterminate></ons-progress-bar>
    <br />
    <p>Loading with Circular Progress Bar with 10%</p>
    <ons-progress-circular value="10"></ons-progress-circular>
    <br />
    <p>Loading with Circular Progress Bar with 20%</p>
    <ons-progress-circular value="20" secondary-value="50"></ons-progress-circular>
    <br />
    <p>Loading with Indeterminate Circular Progress Bar</p>
    <ons-progress-circular indeterminate></ons-progress-circular>
</ons-page>

Bar control

Step 5. Run the application

Now, we are ready to run our project. Thus, click Ripple – Nexus (Galaxy) to run the application. (Apache Ripple is a free mobile simulator).

 Run

Output

The main screen is given below.

Progress bar

Conclusion

I hope you understand how to start the Progress Bar Control in Onsen UI, using Visual Studio 2015, and how to run it.


Similar Articles