IONIC4 : how to use cssClass for Loading , it is doesn't work

Question

I want to change ion-loading style using cssClass ,my code as follow:

loading.page.ts :

@Component({
    selector: \'app-loading\',
    templateUrl:          


        

Answer 1

I'm Using IONIC 4.

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null,
  message: '<ion-img src="assets/gif/loading.gif"></ion-img>',
  cssClass: 'custom-loading'
});
await this.myLoading.present();

at theme/variables.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: transparent !important;
    box-shadow: none !important;
  }
}

There you go. Now you have a custom loading with transparent background.

Answer 2

theme/variables.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: transparent;
    box-shadow: none;
  }
}

I don't know why, but it works in Ionic4.

If you write in loading.page.scss, it doesn't work.

Answer 3

Rano Paimin, your solution doesn't work, so I'll improve your answer:

I'm Using IONIC 4

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null, -> here you can add others spinners ou set null 
  remove this attribute -> message: '<ion-img src="assets/gif/loading.gif"></ion-img>', 
  cssClass: 'custom-loading'
});
await this.myLoading.present();

at theme/variables.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: #ffffff url("assets/gif/loading.gif") no-repeat center;
  }
}

If you want change dimensions you can change these properties:

  background-size: 100px 100px; /* to change dimension of background */
  padding-top: 36px; /* padding top of white square */
  padding-bottom: 36px; /* padding bottom of white square */
  border-radius: 0.8rem; /* border-radius white square */

I hope that helps you.