I want to create a custom loader in ionic 4 ,but in the message feild it is showing html code ,but not rendering my gif image

问题

  async presentLoading() {
    const loading = await this.loader.create({ 
      duration: 2000,
      showBackdrop:false,
      cssClass:'sa',
      spinner:'false',
      message:`
      <div class="custom-spinner-container">
      <img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
    </div>`
    });
    return await loading.present();
  }

回答1:

You can just simply achieve it with css

//Header of file
import { LoadingController } from "@ionic/angular";

//In the constructor
constructor(public loadingCtrl: LoadingController) {

}

async showLoader ()  {
  this.loader = await this.loadingCtrl.create({ 
      cssClass: 'custom-loader',
      spinner: null
  });
  await this.loader.present();
}

/* Inside global.scss 
You can create amazing gifs with
https://loading.io/animation     
*/

.custom-loader {
	--background: transparent;
	ion-backdrop {
		background-color: #fff;
		opacity: .9 !important;
	}
	.loading-wrapper {
		-webkit-animation: ld-vortex-out 2s ease-out infinite;
		animation: ld-vortex-out 2s ease-out infinite;
		animation-timing-function: cubic-bezier(0.05, 0, 3, 0.05);

		background-image:  url("/assets/img/baubap-logo-circle.svg");
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		min-width: 90px;
		min-height: 90px;
		box-shadow: none;
		-webkit-box-shadow: none;
	}
}

@keyframes ld-vortex-out {
	0% {
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
		opacity: 1;
	}

	60% {
		-webkit-transform: rotate(1800deg) scale(1);
		transform: rotate(1800deg) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: rotate(1800deg) scale(1);
		transform: rotate(1800deg) scale(1);
		opacity: 0;
	}
}


@-webkit-keyframes ld-vortex-out {
	0% {
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
		opacity: 1;
	}

	60% {
		-webkit-transform: rotate(1800deg) scale(1);
		transform: rotate(1800deg) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: rotate(1800deg) scale(1);
		transform: rotate(1800deg) scale(1);
		opacity: 0;
	}
}

Result Baubap loader screen

回答2:

So did you check documentation?

In Ionic 3 it was a different syntax and it was not supposed to change:

https://ionicframework.com/docs/api/components/loading/LoadingController/

See their example - use different value for hiding default spinner...

Try this:

async presentLoading() {
    const loading = await this.loader.create({ 
      duration: 2000,
      showBackdrop:false,
      cssClass:'sa',
      spinner:'hide',
      message:`
      <div class="custom-spinner-container">
      <img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
    </div>`
    });
    return await loading.present();
  }

Update: seems like in Ionic 4 suggested way to deal with loader animation is via ion-spinner. But its unclear if the old way should break or is just not supported yet in Beta

来源：https://stackoverflow.com/questions/53128132/i-want-to-create-a-custom-loader-in-ionic-4-but-in-the-message-feild-it-is-show