Ionic 6 Loading Controller Tutorial with ion-loading Example

Ionic 6 loading spinner or indicator tutorial; With this quick guide’s help, we will try to explain how to show loading indicator or spinner in Ionic Angular application using loading controller user-interface component.

Great interfaces are created with great user experiences; taking care of small things plays a vital role in best ux.

When users make any request through the HTTP mechanism, then there is a buffer time when the request is made and response is received; during that time, we can show ionic loading until the data is loaded correctly.

This situation is simply manageable through a custom loader, which we call indicators and spinners. This ion-loading example explains how to integrate ionic spinner and indicator in the ionic app through the ion-loading component.

The ion-loading controller is a fabulous overlay that refrains the user’s interaction while current requests are being processed. The loading indicator in Ionic comes on top of the application’s content and can be removed or dismissed to continue the user interaction with the app.

Add Loading Controller in Ionic 6 Angular

• Step 1: Getting Started
• Step 2: Build Loader Service
• Step 3: Import Loading Controller
• Step 4: Display Simple Loader
• Step 5: Dismiss or Hide Loader
• Step 6: Create Auto Hide Show Loader
• Step 7: Customize Loader Component
• Step 8: Add Loader Service in Ionic Page
• Step 9: Run Ionic App

Getting Started

Open terminal, type and then execute command to install Ionic CLI:

npm install -g @ionic/cli

Then, install a blank new Ionic Angular app:

ionic start ionic-loader-examples blank --type=angular

Enter inside the project:

cd ionic-loader-examples

Build Loader Service

It is always a good practice to make the code reusable, so it is good to take the help of angular service to create a loading component, and after that, it will be available throughout the application.

ionic generate service ionLoader

Import Loading Controller

After generating the IonLoader service file, open the ion-loader.service.ts file and import LoadingController from the ‘@ionic/angular’ package and inject into the constructor() method.

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

@Injectable({
  providedIn: 'root'
})

export class IonLoaderService {

  constructor(
    public loadingController: LoadingController
  ) { }

}

The LoadingController allows access to various properties, methods, and events to display loaders in the ionic app.

Display Simple Loader

The create method allows displaying or creating the loader in conjunction with the Promise object. Moreover, this loader will display for the boundless duration.

Place code in ion-loader.service.ts file.

// Simple loader
simpleLoader() {
    this.loadingController.create({
        message: 'Loading...'
    }).then((response) => {
        response.present();
    });
}

Dismiss or Hide Loader

You need to call the dismiss() method to dismiss the loading overlay after is has been invoked; it returns the promise object.

Place code in ion-loader.service.ts file.

// Dismiss loader
dismissLoader() {
    this.loadingController.dismiss().then((response) => {
        console.log('Loader closed!', response);
    }).catch((err) => {
        console.log('Error occured : ', err);
    });
}

Create Auto Hide Show Loader

We need to create a basic loader, which will display on the screen for 4 seconds and hide after 4 seconds. You need to access create() method, define loader display duration. Within the then response call present() and onDidDismiss() method to dismiss the ionic loader.

Place code in ion-loader.service.ts file.

  // Auto hide show loader
  autoLoader() {
    this.loadingController.create({
      message: 'Loader hides after 4 seconds',
      duration: 4000
    }).then((response) => {
      response.present();
      response.onDidDismiss().then((response) => {
        console.log('Loader dismissed', response);
      });
    });
  } 

Customize Loader Component

This step explains how to add custom styling in loader and how to dismiss loader when clicked or tapped on the screen; you need to set backdropDismiss to true and a class property and pass the class name to it within the create method.

// Custom style + hide on tap loader
  customLoader() {
    this.loadingController.create({
      message: 'Loader with custom style',
      duration: 4000,
      cssClass:'loader-css-class',
      backdropDismiss:true
    }).then((res) => {
      res.present();
    });
  }

Let us conjugate all the custom methods to display or hide the loader in ion loader service class, update the final code in ion-loader.service.ts file.

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

@Injectable({
  providedIn: 'root'
})

export class IonLoaderService {

  constructor(public loadingController: LoadingController) { }


  // Simple loader
  simpleLoader() {
    this.loadingController.create({
      message: 'Loading...'
    }).then((response) => {
      response.present();
    });
  }

  // Dismiss loader
  dismissLoader() {
    this.loadingController.dismiss().then((response) => {
      console.log('Loader closed!', response);
    }).catch((err) => {
      console.log('Error occured : ', err);
    });
  }

  // Auto hide show loader
  autoLoader() {
    this.loadingController.create({
      message: 'Loader hides after 4 seconds',
      duration: 4000
    }).then((response) => {
      response.present();
      response.onDidDismiss().then((response) => {
        console.log('Loader dismissed', response);
      });
    });
  }   

  // Custom style + hide on tap loader
  customLoader() {
    this.loadingController.create({
      message: 'Loader with custom style',
      duration: 4000,
      cssClass:'loader-css-class',
      backdropDismiss:true
    }).then((res) => {
      res.present();
    });
  }   

}

Add Loader Service in Ionic Page

In this step, we have to use IonLoaderService to show loaders in the Ionic home page component, import the IonLoaderService inject in the constructor. We created three functions to call the autoLoader(), simpleLoader() and dismissLoader() methods.

Place code in home.page.ts file.

import { Component } from '@angular/core';
import { IonLoaderService } from '../ion-loader.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(private ionLoaderService: IonLoaderService) { }

  displayAutoLoader() {
    this.ionLoaderService.autoLoader();
  }

  showLoader() {
    this.ionLoaderService.simpleLoader();
  }

  hideLoader() {
    this.ionLoaderService.dismissLoader();
  }

  customizeLoader() {
    this.ionLoaderService.customLoader();
  }

}

In the HTML page, define four buttons bind those functions with a click event to call the loader indicator or spinner.

Place code in home.page.html file.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Loader Examples
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)="displayAutoLoader()" color="primary" expand="block">Show auto loader</ion-button>

  <ion-button (click)="showLoader()" color="success" expand="block">Display loader</ion-button>

  <ion-button (click)="hideLoader()" color="danger" expand="block">Close loader</ion-button>

  <ion-button (click)="customizeLoader()" color="light" expand="block">Show customized loader</ion-button>
</ion-content>

Insert code in global.scss file.

.loader-css-class {
   --background:#261bff;
   --spinner-color:#ffffff;
}

Run Ionic App

You can start the app with the help of ionic lab package.

npm i @ionic/lab --save-dev

Run app on the emulators:

ionic serve -l

Conclusion

The Ionic loading controller tutorial is finished; in this tutorial, we have adequately described how to use LoadingController in the Ionic, angular app. Also, to add, implement, customize and display loading indicator and spinner in ionic app.