Based off the fantastic class by Sam Vermette on SVProgressHUD. nsProgress aims to fill the gap by allowing websites and specifically phonegap apps a cross platform way of showing progress via a HUD. This plugin is written for jQuery so requires this to work (written with 1.8.2).

As with SVProgressHUD, the success and error icons are from Glyphish.

Simple Usage

To get started, place a div in your source and call the plugin on it to initialise.

<div id="progress_modal"></div> 

<script>
    $(document).ready(function() {

        // Default Settings
        $('#progress_modal').nsProgress();

        // Custom Settings
        $('#progress_modal').nsProgress({
            img_path: 'js/plugins/nsProgress/img'
        });

    });
</script>

You are now ready to call methods on the plugin to display, change and hide the HUD.

<script>
    $(document).ready(function() {

        $('#progress_modal').nsProgress();
        $('#progress_modal').nsProgress('showSuccessWithStatusAndMaskType', 'It Worked!', 'black');

    });
</script>

Which will display something like this:

HUD Options

There are a few options that you can pass to choose the HUD Mask style, they are

'none'	allow user interactions, don't dim background UI (default)
'clear'	disable user interactions, don't dim background UI
'black'	disable user interactions, dim background UI with 50% translucent black (my favourite)

Methods Available

I've tried to cover every possible combination, they should be self explanitory!

$('#progress_modal').nsProgress('show');
$('#progress_modal').nsProgress('showWithMaskType', 'none');
$('#progress_modal').nsProgress('showWithStatus', 'Loading…');
$('#progress_modal').nsProgress('showWithStatusAndMaskType', 'Loading…', 'none');
$('#progress_modal').nsProgress('showWithImage', 'nsLoader.gif');
$('#progress_modal').nsProgress('showSuccessWithStatus', 'Error');
$('#progress_modal').nsProgress('showErrorWithStatus', 'Success');
$('#progress_modal').nsProgress('showSuccessWithStatusAndMaskType', 'Success', 'none');
$('#progress_modal').nsProgress('showErrorWithStatusAndMaskType', 'Error', 'none');
$('#progress_modal').nsProgress('showWithImageAndStatus', 'nsLoader.gif', 'Loading…');
$('#progress_modal').nsProgress('showWithImageAndMaskType', 'nsLoader.gif', 'none');
$('#progress_modal').nsProgress('showWithImageAndStatusAndMaskType', 'nsLoader.gif', 'Loading…', 'none');
$('#progress_modal').nsProgress('dismiss');

TODO

Feel free to fork and add any of these if I don't get round to doing them :)

• Delayed dissmissal message like SVProgressHUD has (eg, SVProgressHUD dismissWithError:@"Error Connecting")
• Swap out for retina if the @2x images exist
• More config settings