ion-loading

Contents

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

Loading indicators can be created using a Loading Controller. They can be customized by passing loading options in the loading controller's create method. The spinner name should be passed in the spinner property, and any optional HTML can be passed in the content property. If a value is not passed to spinner the loading indicator will use the spinner specified by the platform.

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. 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.

Usage

angular javascript 
import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'loading-example',
  templateUrl: 'loading-example.html',
  styleUrls: ['./loading-example.css']
})
export class LoadingExample {
  constructor(public loadingController: LoadingController) {}

  async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Hellooo',
      duration: 2000
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();

    console.log('Loading dismissed!');
  }

  async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({
      spinner: null,
      duration: 5000,
      message: 'Please wait...',
      translucent: true,
      cssClass: 'custom-class custom-loading'
    });
    return await loading.present();
  }
}
async function presentLoading() {
  const loadingController = document.querySelector('ion-loading-controller');
  await loadingController.componentOnReady();

  const loading = await loadingController.create({
    message: 'Hellooo',
    duration: 2000
  });

  await loading.present();

  const { role, data } = await loading.onDidDismiss();

  console.log('Loading dismissed!');
}

async function presentLoadingWithOptions() {
  const loadingController = document.querySelector('ion-loading-controller');
  await loadingController.componentOnReady();

  const loading = await loadingController.create({
    spinner: null,
    duration: 5000,
    message: 'Please wait...',
    translucent: true,
    cssClass: 'custom-class custom-loading'
  });
  return await loading.present();
}

Properties

animated

Description

If true, the loading indicator will animate.

Attribute animated
Type boolean

backdropDismiss

Description

If true, the loading indicator will be dismissed when the backdrop is clicked.

Attribute backdrop-dismiss
Type boolean

cssClass

Description

Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.

Attribute css-class
Type string | string[] | undefined

duration

Description

Number of milliseconds to wait before dismissing the loading indicator.

Attribute duration
Type number

enterAnimation

Description

Animation to use when the loading indicator is presented.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attribute keyboard-close
Type boolean

leaveAnimation

Description

Animation to use when the loading indicator is dismissed.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

message

Description

Optional text content to display in the loading indicator.

Attribute message
Type string | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

showBackdrop

Description

If true, a backdrop will be displayed behind the loading indicator.

Attribute show-backdrop
Type boolean

spinner

Description

The name of the spinner to display.

Attribute spinner
Type "bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined

translucent

Description

If true, the loading indicator will be translucent.

Attribute translucent
Type boolean

Events

Name Description
ionLoadingDidDismiss Emitted after the loading has dismissed.
ionLoadingDidPresent Emitted after the loading has presented.
ionLoadingWillDismiss Emitted before the loading has dismissed.
ionLoadingWillPresent Emitted before the loading has presented.

Methods

dismiss

Description

Dismiss the loading overlay after it has been presented.

Signature dismiss(data?: any, role?: string | undefined) => Promise<boolean>

onDidDismiss

Description

Returns a promise that resolves when the loading did dismiss.

Signature onDidDismiss() => Promise<OverlayEventDetail<any>>

onWillDismiss

Description

Returns a promise that resolves when the loading will dismiss.

Signature onWillDismiss() => Promise<OverlayEventDetail<any>>

present

Description

Present the loading overlay after it has been created.

Signature present() => Promise<void>

CSS Custom Properties

Name Description
--background Background of the loading dialog
--height Height of the loading dialog
--max-height Maximum height of the loading dialog
--max-width Maximum width of the loading dialog
--min-height Minimum height of the loading dialog
--min-width Minimum width of the loading dialog
--spinner-color Color of the loading spinner
--width Width of the loading dialog