添加自定义加载动画Ionic 4

Question

我想使用GIF或SVG动画为ionic 4应用程序创建自定义加载微调器。没有用HTML填充的“ content”属性，因此在这种情况下如何用自定义SVG或GIF替换气泡SVG？

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

Answer 1

作为 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;
 }

Answer 2

你可以用这个...

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

      loading.present();
}