CODEWITHSUNDEEP
cssionic4
Tinaaulim
Tinaaulim

Reputation: 113

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

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

loading.page.ts :

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

constructor(public lLoadingController: LoadingController) { }

async  presentCunstomLoading() {
    const loading = await this.lLoadingController.create({
        spinner: 'hide',
        duration: 500000,
        content: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class'
    });
    return await loading.present();
}
}

loading.page.scss ::

`

app-loading {
  .custom-class {
    background: #e0b500;
  }

}`

loading.page.html :

<ion-content padding>
    <ion-button (click)="presentModal()">open modal</ion-button>
</ion-content>

What's problem with this? Anyone can help me . I am confused. Thanks advance.

Upvotes: 1

Views: 3362

Answers (3)

M&#225;rcio Ferreira
M&#225;rcio Ferreira

Reputation: 31

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.

Upvotes: 0

Rano Paimin
Rano Paimin

Reputation: 199

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.

Upvotes: 1

Shohei Ktbtk
Shohei Ktbtk

Reputation: 31

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.

Upvotes: 3

Related Questions