Hello Readers,

In today's blog we will talk about progress plugin in Cordova / phoneGap apps. It is a progress loader and there is no need to add any JavaScript library for this.

This plugin supports iOS platform. It should be higher than iOS7.

 To install the plugin run through CLI run :

Latest version on npm

$ cordova plugin add cordova-plugin-progress

Latest version from Github

$ cordova plugin add https://github.com/leecrossley/cordova-plugin-progress.git

Now move to the example or usage :

After installation, this plugin create an object named progress with three methods which are as follows:

1. Show(): This method used to show progress loader.

• Showing basic progress loader : 

// with success and error handlers
progress.show(onSuccess, onError);

// without callback functions
progress.show();

• Showing basic progress loader with text :

// with success and error handlers
progress.show(onSuccess, onError, {"text": "Loading..."});

// with success and error handlers (shorthand)
progress.show(onSuccess, onError, "Loading...");

// without callback functions
progress.show({"text": "Loading..."});

// without callback functions (shorthand)
progress.show("Loading...");

2. update() : This method is use update the loader text.

// with success and error handlers
progress.update(onSuccess, onError, {"text": "Still loading..."});

// with success and error handlers (shorthand)
progress.update(onSuccess, onError, "Still loading...");

// without callback functions
progress.update({"text": "Still loading..."});

// without callback functions (shorthand)
progress.update("Still loading...");

3. hide() : This method use to hide the loader when success handler called or when user get the results we can hide the loader.

// with success and error handlers
progress.hide(onSuccess, onError);

// without callback functions
progress.hide();

Note:  If loader will appear without text then width will be smaller then loader with text. So width of loader will depend on the text on it.

Full example:

<button id="show">show loader</button>

$("#show").on('click', function() {
        progress.show("Loading...");

        setTimeout(function () {
            progress.update("Still loading...");
        }, 1500);

        setTimeout(function () {
            progress.hide();
        }, 3000);
});

In the above example a basic loader will show with "Loading..." text then after sometime text will be updated then the loader will be hide.

This plugin provides simple and smoother progress loader for iOS apps.

Hoe this will help you :)