web-dev-qa-db-fra.com

Ajouter une animation de chargement personnalisée Ionic 4

Je veux créer un spinner de chargement personnalisé pour mon ionic 4 avec une animation GIF ou SVG. Il n'y a pas de propriété "content" à remplir en html, alors comment remplacer les bulles SVG dans ce cas avec un SVG ou GIF personnalisé?

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

Comme ionic V4 documentation officielle, ce n'est pas possible. Mais vous pouvez utiliser une astuce via CSS.

Utilisation <ion-img> tag à l'intérieur message clé de allert au lieu de <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
    });

Créez des images clés personnalisées, vous pouvez également utiliser celle-ci pour générer votre propre 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********************

Créer une classe personnalisée

.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;
 }
2
parrycima

J'espère que cette aide.

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

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

Vous pouvez utiliser cette classe CSS pour ajouter votre Gif comme arrière-plan. Vous pouvez également utiliser le chargement ionique pour styliser la boîte de dialogue de chargement.

1
Mohamad nagi

EResman,

j'ai répondu à votre question sur ce lien

J'utilise 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();

sur theme/variables.scss 

ion-loading.custom-loading {
  .loading-wrapper {
    background: #ffffff url("assets/gif/loading.gif") no-repeat center;
  }
}

Si vous souhaitez modifier les dimensions, vous pouvez modifier ces propriétés.

  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 */

J'espère que cela vous aidera.

1
Márcio Ferreira