https://github.com/netsells/nsprogress
nsProgress aims to fill the gap by allowing websites and specifically phonegap apps a cross platform way of showing progress via a HUD
https://github.com/netsells/nsprogress
Last synced: 30 days ago
JSON representation
nsProgress aims to fill the gap by allowing websites and specifically phonegap apps a cross platform way of showing progress via a HUD
- Host: GitHub
- URL: https://github.com/netsells/nsprogress
- Owner: netsells
- License: other
- Created: 2012-10-03T22:27:06.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2012-10-04T20:07:36.000Z (over 12 years ago)
- Last Synced: 2025-03-24T20:11:20.556Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Based off the fantastic class by Sam Vermette on [SVProgressHUD](https://github.com/samvermette/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](http://glyphish.com/).
## Simple Usage
To get started, place a div in your source and call the plugin on it to initialise.
```
$(document).ready(function() {
// Default Settings
$('#progress_modal').nsProgress();
// Custom Settings
$('#progress_modal').nsProgress({
img_path: 'js/plugins/nsProgress/img'
});
});
```
You are now ready to call methods on the plugin to display, change and hide the HUD.
```
$(document).ready(function() {
$('#progress_modal').nsProgress();
$('#progress_modal').nsProgress('showSuccessWithStatusAndMaskType', 'It Worked!', 'black');
});
```
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