ionic loader code example
Example 1: ionic spinner
<ion-spinner></ion-spinner>
<ion-spinner name="lines"></ion-spinner>
<ion-spinner name="lines-small"></ion-spinner>
<ion-spinner name="dots"></ion-spinner>
<ion-spinner name="bubbles"></ion-spinner>
<ion-spinner name="circles"></ion-spinner>
<ion-spinner name="crescent"></ion-spinner>
<ion-spinner paused></ion-spinner>
Example 2: ionic loading
import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
@Component({
selector: 'loading-example',
templateUrl: 'loading-example.html',
styleUrls: ['./loading-example.css']
})
export class LoadingExample {
constructor(public loadingController: LoadingController) {}
async presentLoading() {
const loading = await this.loadingController.create({
message: 'Please wait...',
duration: 2000
});
await loading.present();
const { role, data } = await loading.onDidDismiss();
console.log('Loading dismissed!');
}
async presentLoadingWithOptions() {
const loading = await this.loadingController.create({
spinner: null,
duration: 5000,
message: 'Click the backdrop to dismiss early...',
translucent: true,
cssClass: 'custom-class custom-loading',
backdropDismiss: true
});
await loading.present();
const { role, data } = await loading.onDidDismiss();
console.log('Loading dismissed with role:', role);
}
}