Customizing loaders and styles for different components is possible. For example:
Page A
presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-a',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-a.gif" />`,
});
loading.present();
}
.page-a {
// ADD YOUR CUSTOM STYLES HERE
}
Page B
presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-b',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-b.gif" />`,
});
loading.present();
}
.page-b {
// ADD YOUR CUSTOM STYLES HERE
}
If you need a common loader, create a loader service like the following:
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
@Injectable()
export class LoaderService {
public loading: any;
constructor(publicloadingCtrl: LoadingController) { }
async show(loaderClass, image) {
if (!this.loading) {
this.loading = await this.loadingCtrl.create({
cssClass: loaderClass,
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="'+image+'" />`
});
this.loading.present();
}
}
async hide() {
if (this.loading) {
await this.loading.dismiss();
this.loading = null;
}
}
}
Import the loader service into your page:
import { LoaderService } from './../loader/loader.service';
constructor(private loader: LoaderService) {
}
async doSubmit() {
await this.loader.show('LOADER_CLASSNAME', 'YOUR_LOADER_IMAGE');
...perform actions here
this.loader.hide();
}
In this scenario, you can specify custom class and image by passing them as arguments.