nativescript-loading-indicator
nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.
- iOS: MBProgressHUD
- Android: ProgressDialog
Installation
tns plugin add nativescript-loading-indicator
Example
var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator;
// or with TypeScript:
// import {LoadingIndicator} from "nativescript-loading-indicator";
var loader = new LoadingIndicator();
// optional options
// android and ios have some platform specific options
var options = {
message: 'Loading...',
progress: 0.65,
android: {
indeterminate: true,
cancelable: false,
max: 100,
progressNumberFormat: "%1d/%2d",
progressPercentFormat: 0.53,
progressStyle: 1,
secondaryProgress: 1
},
ios: {
details: "Additional detail note!",
square: false,
margin: 10,
dimBackground: true,
color: "#4B9ED6", // color of indicator
backgroundColor: "yellow", // background box around indicator
view: UIView, // Target view to show on top of (Defaults to entire window)
mode: // see iOS specific options below
}
};
loader.show(options); // options is optional
// Do whatever it is you want to do while the loader is showing, then
loader.hide();
Options
- message:
string
Your message! - progress:
number
Set progress display
Android Specific
iOS Specific
Quick Mode
Reference:
MBProgressHUDModeDeterminate
MBProgressHUDModeAnnularDeterminate
MBProgressHUDModeDeterminateHorizontalBar
MBProgressHUDModeText
MBProgressHUDModeCustomView
- use with
customView: string
- local path to an image file
- use with