Ionic loading spinner or indicator tutorial; With this quick guide, we will try to find out 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; there is a buffer time when the request is made on the other hand 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 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, first type, then execute command to install latest version of Ionic CLI:
sudo npm install -g @ionic/cliThe ‘sudo’ command asks for the admin password; enter the password, hit enter, let the Ionic CLI install in your system.
Now, install a blank new Ionic Angular app:
ionic start ionic-loader-examples blank --type=angularEnter inside the project:
cd ionic-loader-examplesDisable Strict Type Errors
To avoid TypeScript compiling issues, we just need to open tsconfig.json file:
First, set below property under “compilerOptions” property.
"compilerOptions": {
"strictPropertyInitialization": false,
"skipLibCheck": true
...
}Secondly, add given props under “angularCompilerOptions”.
"angularCompilerOptions": {
"strictTemplates": false,
...
}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 ionLoaderImport 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-devRun 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.