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

user_10362468 0
Viewed 3675
  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();
  }
ionic4
2 Answers

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

user_41548550

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

user_40053660
Related