January 30, 2017

Ionic 2 Loading

❮❮ Previous
Next ❯❯

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

Ionic 2 Loading Html Part :

<button ion-button (click)="presentLoading()" >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-

Ionic 2 Loading Controller Example:

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();
  }
}

Try it »

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-

Ionic 2 Loading Example & Demo

Loading Options

Following Options are available for the loading spinner.

Option Type Description
spinner string SVG spinner Name for the loading indicator.
content string This is used to add the content for loading indicator.
cssClass string This is used to add custom classes to indicator. You can add multiple classes separeated by space.
showBackdrop boolean Whether to show the backdrop. Default true.
dismissOnPageChange boolean Whether to dismiss the indicator when navigating to other page. Default false.
duration number Milliseconds to show loader. By default, it will show until dismiss() is called.

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯