const LoadingIndicator = require('@nstudio/nativescript-loading-indicator').LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;
const loader = new LoadingIndicator();
import { Page } from 'tns-core-modules/ui/page';
// customizing optional options for the loading indicator
const customizationOptions = {
message: 'Loading...',
details: 'Additional detail note!',
progress: 0.65,
margin: 10,
dimBackground: true,
color: '#4B9ED6', // setting color of indicator and labels
backgroundColor: 'yellow',
userInteractionEnabled: false,
hideBezel: true,
mode: Mode.AnnularDeterminate,
android: {
view: page.getViewById('stackView'),
cancelable: true,
cancelListener: function(dialog) {
console.log('Loading cancelled');
}
},
ios: {
view: page.getViewById('stackView')
}
};
loader.show(customizationOptions); // customized options
// Performing actions while the loader is displayed, then hiding it
loader.hide();
The specified view must be a valid uiView in your interface. Assign an Id to a StackLayout and target it.
For example:
view: page.getViewById("stackLayout")
Extracted from the npm plugin's sample code
UPDATED