Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add custom loading animation Ionic 4

Tags:

ionic4

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();
}
like image 1000
EResman Avatar asked Dec 25 '18 11:12

EResman


People also ask

How use Javascript loading in ionic framework?

Using Loading First, we need to inject $ionicLoading in our controller as dependency. After that, we need to call the $ionicLoading. show() method and loading will appear.

How do you dismiss loader in ionic 4?

By default the loading indicator will show even during page changes, but this can be disabled by setting dismissOnPageChange to true . To dismiss the loading indicator after creation, call the dismiss() method on the Loading instance.

How do you use an ionic spinner?

The default spinner to use is based on the platform. The default spinner for ios is "lines" , and the default for android is "crescent" . If the platform is not ios or android , the spinner will default to crescent . If the name property is set, then that spinner will be used instead of the platform specific spinner.


2 Answers

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;
 }
like image 170
parrycima Avatar answered Oct 02 '22 20:10

parrycima


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.

like image 35
Márcio Ferreira Avatar answered Oct 02 '22 22:10

Márcio Ferreira