Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Progress loader plugin for Cordova / PhoneGap iOS apps.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.04k
    Comment on it

    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 :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: