web-dev-qa-db-ja.com

カスタム読み込みアニメーションを追加Ionic 4

ionic 4アプリにGIFまたはSVGアニメーションを含むカスタムロードスピナーを作成したいこの場合、カスタムSVGまたはGIFを使用しますか？

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

ionic V4公式ドキュメントのように、それは不可能です。しかし、CSSを介してトリックを使用できます。

使用する <ion-img>タグ内メッセージ代わりにアラートのキー<img/> 鬼ごっこ

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

カスタムキーフレームを作成します。これを使用して、独自のアニメーションを生成することもできます。

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

カスタムクラスを作成する

.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

私はこのヘルプを願っています。

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

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

このCSSクラスを使用してGifを背景として追加できます。また、イオン読み込みを使用して読み込みダイアログのスタイルを設定することもできます。

1
Mohamad nagi

EResman、

このリンクで質問に回答しました

私は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;
  }
}

寸法を変更したい場合は、このプロパティを変更できます。

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

お役に立てば幸いです。

1
Márcio Ferreira