Change transparancy of page when spinner is loading


#1

How can I change the transparancy of the area behind the spinner when it is shown (they grey area pointed at with the arrow). I want the entire screen to be white when I load some remote data. I cannot find this using Google or in the spinner docs.


#2

There is one way to perform this.

While creating your loading controller just give css class to it like,

presentLoadingDefault() {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...',
    cssClass: 'activity-detail-loading'
  });

  loading.present();

  setTimeout(() => {
    loading.dismiss();
  }, 50000);
}

After that in css file you need to write below mentioned code.


.activity-detail-loading {
	ion-backdrop{
		opacity: 0.2 !important;	
	}
	
}

Hope this will help you in getting your result.


#3

Thank you I’ve got it working!