これは
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'
}