How to Create Loading Indicator/Spinner in Ionic 6

 This tutorial describes how to easily integrate a loading controller in the Ionic Angular app to display the loading spinner. We will show you how to customize the default style of ionic spinners and loaders.

On top of that, we will use the ion-loading property for evoking loaders in ionic.

The ion-loading manifests an overlay on the device screen and the loader or spinner positioned at the center of the app layout. It shows some activity is occurring and abstain the user from interacting with the application.

The loading indicator can be revoked, and the user can continue interaction with the app. Notwithstanding, you can disable the backdrop through showBackdrop: false properties.

Also, we will share How to integrate different types of spinners in ionic using the various loading/spinner types such as bubbles, circles, circular, crescent, dots, lines and lines-small.

Ionic 6 Angular Loading/Spinner Example

• Step 1: Install Ionic Project
• Step 3: Add Loading Controller in Ionic Page
• Step 4: Add Basic Loading Spinner
• Step 5: Revoke or Dismiss Ionic Loader
• Step 6: Hide and Show Loader
• Step 7: Add Custom Styling in Loading Indicator
• Step 8: Ionic Spinner Types
• Step 9: Run Ionic App

Install Ionic Project

In the first step, we will be setting up the Ionic development environment, so begin with the following command to install Ionic CLI:

npm install -g @ionic/cli

Bash

Execute command to create a new Ionic Angular application:

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

Bash

Head over to application’s root:

cd ionic-loader-demo

Bash

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Add Loading Controller in Ionic Page

To create a loader spinner in the ionic page, we first need to import the LoadingController and add it into the constructor.

Update code in home.page.ts file:

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

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

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() {
  }

}

TypeScript

Add Basic Loading Spinner

In the previous step, we comprehended how to add LoadingController in page, now we have proper access to loading ui various methods and properties. So, ideally we may now create or add a basic loading indicator in ionic.

Update home.page.ts file:

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

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

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() { }

  basicLoader() {
      this.loadingCtrl.create({
          message: 'Please wait...',
          duration: 3000,
          translucent: true
      }).then((res) => {
          res.present();
      });
  }

}

TypeScript

The create() method returns the then object, within then we can call the present() method to display simple Loader, also Loader contains a spinner with a custom message, you may pass a text or string with a message property.

Revoke or Dismiss Ionic Loader

Now, we will understand how to dismiss or revoke the loader, although we add duration in the previous example, and it will close the loader within the defined duration. But there is another way to dismiss the ionic loader.

We can define and call the dismiss() method, and it will close the loading indicator after invoking.

closeLoader() {
    this.loadingCtrl.dismiss().then((res) => {
        console.log('Loader hidden', res);
    }).catch((error) => {
        console.log(error);
    });
}

TypeScript

Hide and Show Loader

The following example shows how to display a loading indicator for a specific duration and hide automatically using the onDidDismiss() method.

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

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

export class HomePage implements OnInit {

  constructor(
    public loadingCtrl: LoadingController
  ) { }

  ngOnInit() { }

  autoHideShow() {
    this.loadingCtrl.create({
      message: 'Dismiss after 3 seconds',
      duration: 3000
    }).then((res) => {
      res.present();
      res.onDidDismiss().then((res) => {
        console.log('Loader closed', res);
      });
    });
  } 

}

TypeScript

Add Custom Styling in Loading Indicator

The cssClass property is useful in adding the custom class in the ionic loader, after which you can change the color of the spinner.

  loaderCustomClass() {
      this.loadingCtrl.create({
          message: 'Please wait...',
          cssClass:'ion-loading-class'
      }).then((res) => {
          res.present();
      });
  }

TypeScript

You need to add the CSS class and styling code in global.scss file:

.ion-loading-class {
    --background:#f408e8;
    --spinner-color:#ffffff;
}

Sass (Scss)

Ionic Spinner Types

We can easily change the spinner’s name and display different loading indicators; here are the spinner types that you can implement using the ionic controller.

"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" 

Bash

  bubbleIndicator() {
      this.loadingCtrl.create({
          spinner: 'bubbles',
          backdropDismiss: true,
          message: 'Click backdrop to dismiss ...',
      }).then((res) => {
          res.present();
      });
  }

TypeScript

Run Ionic App

In the final step, you have to add the platform, create the build and start the app on the device:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android


# iOS
ionic cordova build ios

# Android
ionic cordova build android


# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l