Nuxt.jsでLottieアニメーションをページローディングで使う

これは

lottieで作ったアニメーションをNuxt.jsのページローディングで使う方法。

まずlottieで読み込むアニメーションファイルを作成。
ここでは、loading.jsonというファイルで用意した。
保存先はassets/animation/loading.json

https://lottiefiles.com/
(サイトに様々なexampleが用意されているので参考に）

player installation

lottieをwebで使うためにlottie-webというnpmをinstallする。
see https://github.com/airbnb/lottie-web

with npm
npm install lottie-web

with yarn
yarn add lottie-web

loading animation component

jsonを読みこむコンポーネントの作成。
使用する際はコンポーネントのjsonを用意したファイルに書き換えると良い。

loading.vue

<template>
  <div v-show="loading" class="loading">
    <div class="anim" ref="lavContainer"></div>
  </div>
</template>

<script>
import loading from "@/assets/animation/loading.json";

export default {
  data: () => ({
    loading: false
    options: {
      animationData,
      loop: false,
      autoplay: false,
      rendererSettings: ""
    };
  }),
  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: "svg",
      loop: this.options.loop !== false,
      autoplay: this.options.autoplay !== false,
      animationData: this.options.animationData,
      rendererSettings: this.options.rendererSettings
    });
  }
  methods: {
    start() {
      this.anim.play();
      this.loading = true;
    },
    finish() {
      this.anim.stop();
      this.loading = false;
    }
  }
}
</script>

<style scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
  z-index: 9999;
}

.anim {
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
  width: 100px;
}
</style>

loading config setting

nuxt.config.jsに作成したコンポーネントを指定する。
これでページネーション時のアニメーションが実行される。

nuxt.config.js

export default {
  loading: '~/components/loading.vue'
}