Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

LoadingController

Improve this doc

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

Returns: 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

Related

Spinner API Docs

API

Native

General