CODEWITHSUNDEEP
ionic4
EResman
EResman

Reputation: 444

Add custom loading animation Ionic 4

I want to create a custom loading spinner for my ionic 4 app with a GIF or SVG animation. There is no "content" property to fill with html, so how do I replace the bubbles SVG in this case with a custom SVG or GIF?

async presentLoading() {
    const loading = await this.loadingController.create({
    spinner: 'bubbles',
    duration: 2000
    });
return await loading.present();
}

Upvotes: 9

Views: 9173

Answers (4)

Márcio Ferreira
Márcio Ferreira

Reputation: 31

EResman,

I answered your question on this link

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 this 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 help you.

Upvotes: 3

parrycima
parrycima

Reputation: 945

As ionic V4 official documentation, its not possible. But you can use a trick via CSS.

Use <ion-img> tag inside message key of allert intead of <img/> tag

const loading = await this.loadingController.create({
      message: '<ion-img src="/assets/svg/shopping.svg" alt="loading..."></ion-img>',
      cssClass: 'scale-down-center',
      translucent: true,
      showBackdrop: false,
      spinner: null,
      duration: 2000
    });

Create custom keyframes, you can also use this one to generate your own animation.

// CUSTOM ANIMATION KEYFRAMS********************
 @-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
// CUSTOM ANIMATION KEYFRAMS********************

Create custom class

.scale-down-center {
    -webkit-animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
            animation: scale-down-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite alternate both;
 }

Upvotes: 6

Mohamad nagi
Mohamad nagi

Reputation: 101

I hope this Help.

     async showLoader() {
            if (!this.loader) {
            this.loader = await this.loadingController.create({
            spinner: null,
            message: '' ,
            cssClass: 'custom-class custom-loading',

      });
 }
    await this.loader.present();
}

You can use this CSS class to add your Gif as a Background.you can also use ion-loading to style the loading dialogue.

Upvotes: 1

user9088454
user9088454

Reputation: 1122

You can use this...

async presentLoading() {
    const loading = await this.loading.create({
      spinner: null,
      message: '<img src="assets/icon/loader.gif">',
      duration: 5000,
      });

      loading.present();
}

Upvotes: -4

Related Questions