Ionic 2 Loading

Ionic 2 Loading: Loading is used to indicate that some background activity is going on and it prevents the user interaction during the activity. By default spinner is displayed, you can also pass custom content to the spinner. Spinner is displayed on the top of the application. It is very easy to create Loading in Ionic 2. Here in this tutorial we are going to explain how you can create loaders in Ionic 2 with different-different options. You can also use our online editor to see the output of the example.

Ionic 2 Loading | Loader | Spinner Example

Let us create the very simple loader in Ionic 2.

Html Part: demo.html

<button ion-button="">Show Loading</button>

In html part we have created a simple button and called function presentLoading() on click event. Now let us define this function in controller simply as below.

Controller Part: demo.ts

LoadingController is used to create loading in Ionic 2 so import LoadingController to create loader simply as below-

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

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public loadingCtrl: LoadingController) {
  }
  presentLoading() {
    let loader = this.loadingCtrl.create({
      content: "Loading..",
      duration: 3000
    });
    loader.present();
  }
}          

In the above example we have passes content as Text “Loading..” and set the duration 3000ms ie 3 seconds, the loader will automatically disappear after 3 seconds.
If you run the above example it will produce the output something like this-

Loading Options

Following Options are available for the loading spinner.