ionic4 - 我想在 ionic 4 中创建一个自定义加载器，但在消息字段中它显示 html 代码，但不呈现我的 gif 图像

Question

  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();
  }

Answer 1

你可以简单地用 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;
	}
}

结果
Baubap loader screen