LoadingController
An overlay that can be used to indicate activity while blocking user
interaction. The loading indicator appears on top of the app's content,
and can be dismissed by the app to resume user interaction with
the app. It includes an optional backdrop, which can be disabled
by setting showBackdrop: false
upon creation.
Creating
You can pass all of the loading options in the first argument of
the create method: create(opts)
. The spinner name should be
passed in the spinner
property, and any optional HTML can be passed
in the content
property. If you do not pass a value to spinner
the loading indicator will use the spinner specified by the mode. To
set the spinner name across the app, set the value of loadingSpinner
in your app's config. To hide the spinner, set loadingSpinner: 'hide'
in the app's config or pass spinner: 'hide'
in the loading
options. See the create method below for all available options.
Dismissing
The loading indicator can be dismissed automatically after a specific
amount of time by passing the number of milliseconds to display it in
the duration
of the loading options. By default the loading indicator
will show even during page changes, but this can be disabled by setting
dismissOnPageChange
to true
. To dismiss the loading indicator after
creation, call the dismiss()
method on the Loading instance. The
onDidDismiss
function can be called to perform an action after the loading
indicator is dismissed.
Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the
usage
section below.
Limitations
The element is styled to appear on top of other content by setting its
z-index
property. You must ensure no element has a stacking context with
a higher z-index
than this element.
Usage
constructor(public loadingCtrl: LoadingController) {
}
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
setTimeout(() => {
loading.dismiss();
}, 5000);
}
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 5000
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
presentLoadingText() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: 'Loading Please Wait...'
});
loading.present();
setTimeout(() => {
this.nav.push(Page2);
}, 1000);
setTimeout(() => {
loading.dismiss();
}, 5000);
}
Instance Members
config
create(opts)
Create a loading indicator. See below for options.
Param | Type | Details |
---|---|---|
opts |
LoadingOptions
|
Loading optionsOptional |
Loading
Returns a Loading Instance
Advanced
Loading options
Option | Type | Description |
---|---|---|
spinner | string |
The name of the SVG spinner for the loading indicator. |
content | string |
The html content for the loading indicator. |
cssClass | string |
Additional classes for custom styles, separated by spaces. |
showBackdrop | boolean |
Whether to show the backdrop. Default true. |
enableBackdropDismiss | boolean |
Whether the loading indicator should be dismissed by tapping the backdrop. Default false. |
dismissOnPageChange | boolean |
Whether to dismiss the indicator when navigating to a new page. Default false. |
duration | number |
How many milliseconds to wait before hiding the indicator. By default, it will show until dismiss() is called. |
Sass Variables
Property | Default | Description |
---|---|---|
$loading-ios-padding-top |
24px |
Padding top of the loading wrapper |
$loading-ios-padding-end |
34px |
Padding end of the loading wrapper |
$loading-ios-padding-bottom |
$loading-ios-padding-top |
Padding bottom of the loading wrapper |
$loading-ios-padding-start |
$loading-ios-padding-end |
Padding start of the loading wrapper |
$loading-ios-max-width |
270px |
Max width of the loading wrapper |
$loading-ios-max-height |
90% |
Maximum height of the loading wrapper |
$loading-ios-border-radius |
8px |
Border radius of the loading wrapper |
$loading-ios-text-color |
#000 |
Text color of the loading wrapper |
$loading-ios-background |
#f8f8f8 |
Background of the loading wrapper |
$loading-ios-content-font-weight |
bold |
Font weight of the loading content |
$loading-ios-content-margin-start |
$content-ios-margin |
Margin start of the loading content next to a spinner |
$loading-ios-spinner-color |
#69717d |
Color of the loading spinner |
$loading-ios-spinner-ios-color |
$loading-ios-spinner-color |
Color of the ios loading spinner |
$loading-ios-spinner-bubbles-color |
$loading-ios-spinner-color |
Color of the bubbles loading spinner |
$loading-ios-spinner-circles-color |
$loading-ios-spinner-color |
Color of the circles loading spinner |
$loading-ios-spinner-crescent-color |
$loading-ios-spinner-color |
Color of the crescent loading spinner |
$loading-ios-spinner-dots-color |
$loading-ios-spinner-color |
Color of the dots loading spinner |
Property | Default | Description |
---|---|---|
$loading-md-padding-top |
24px |
Padding top of the loading wrapper |
$loading-md-padding-end |
$loading-md-padding-top |
Padding end of the loading wrapper |
$loading-md-padding-bottom |
$loading-md-padding-top |
Padding bottom of the loading wrapper |
$loading-md-padding-start |
$loading-md-padding-end |
Padding start of the loading wrapper |
$loading-md-max-width |
280px |
Max width of the loading wrapper |
$loading-md-max-height |
90% |
Maximum height of the loading wrapper |
$loading-md-border-radius |
2px |
Border radius of the loading wrapper |
$loading-md-text-color |
rgba(0, 0, 0, .5) |
Text color of the loading wrapper |
$loading-md-background |
#fafafa |
Background of the loading wrapper |
$loading-md-box-shadow-color |
rgba(0, 0, 0, .4) |
Box shadow color of the loading wrapper |
$loading-md-box-shadow |
0 16px 20px $loading-md-box-shadow-color |
Box shadow of the loading wrapper |
$loading-md-content-margin-start |
$content-md-margin |
Margin start of the loading content next to a spinner |
$loading-md-spinner-color |
color($colors-md, primary) |
Color of the loading spinner |
$loading-md-spinner-ios-color |
$loading-md-spinner-color |
Color of the ios loading spinner |
$loading-md-spinner-bubbles-color |
$loading-md-spinner-color |
Color of the bubbles loading spinner |
$loading-md-spinner-circles-color |
$loading-md-spinner-color |
Color of the circles loading spinner |
$loading-md-spinner-crescent-color |
$loading-md-spinner-color |
Color of the crescent loading spinner |
$loading-md-spinner-dots-color |
$loading-md-spinner-color |
Color of the dots loading spinner |
Property | Default | Description |
---|---|---|
$loading-wp-padding-top |
20px |
Padding top of the loading wrapper |
$loading-wp-padding-end |
$loading-wp-padding-top |
Padding end of the loading wrapper |
$loading-wp-padding-bottom |
$loading-wp-padding-top |
Padding bottom of the loading wrapper |
$loading-wp-padding-start |
$loading-wp-padding-end |
Padding start of the loading wrapper |
$loading-wp-max-width |
280px |
Max width of the loading wrapper |
$loading-wp-max-height |
90% |
Maximum height of the loading wrapper |
$loading-wp-border-radius |
2px |
Border radius of the loading wrapper |
$loading-wp-text-color |
#fff |
Text color of the loading wrapper |
$loading-wp-background |
#000 |
Background of the loading wrapper |
$loading-wp-content-margin-start |
$content-wp-margin |
Margin start of the loading content next to a spinner |
$loading-wp-spinner-color |
$loading-wp-text-color |
Color of the loading spinner |
$loading-wp-spinner-ios-color |
$loading-wp-spinner-color |
Color of the ios loading spinner |
$loading-wp-spinner-bubbles-color |
$loading-wp-spinner-color |
Color of the bubbles loading spinner |
$loading-wp-spinner-circles-color |
$loading-wp-spinner-color |
Color of the circles loading spinner |
$loading-wp-spinner-crescent-color |
$loading-wp-spinner-color |
Color of the crescent loading spinner |
$loading-wp-spinner-dots-color |
$loading-wp-spinner-color |
Color of the dots loading spinner |