今回は、nuxtでローディング画面を作る方法について紹介します。
NuxtやVueを使うと簡単にローディング画面を作ることができます。
読み込まれたときの処理は書きを利用することで処理ができます。
mounted() {
this.$nextTick(() => {
setTimeout(() => {
//読み込まれたときの処理
}, 700)
})
},
nuxtのドキュメント
vueのドキュメント
上記を参考にして作成をしているので、詳しくは上記を参考にしてもらえればいいかと思います。
環境とバージョンについて
- mac OS 11.2.3
- エディタ VSCode
- node v14.8.0
- npm 6.14.7
ローディング画面の作り方
nuxtにはデフォルトでローディングアニメーションがあるのでそちらを使ってもいいんですが今回は自作したローディング画面を作る方法について紹介をします。
今回は読み込んだときに毎回ローディング画面を表示させたいのでデフォルトのレイアウトにローディングの記述を書いていきます。
流れとしては
- ローディング中に表示させるための画面を作成
- デフォルトのレイアウトを作成
- デフォルトのレイアウトで要素の読み込みが終わるまでリロードの画面を表示
の流れになります。
ローディング中に表示させる画面の作成
まずはじめに、ローディング中に表示させる、アニメーションの画面を作成します。
コンポーネントの中でLoading.vueのコンポーネントを作成します。
See the Pen
Loading by xhisashix (@xhisashix)
on CodePen.
上記のようなイメージのアニメーションを作成します。
components/ui/Loading.vue
<template lang="pug">
.load
.letter-holder
.l-1.letter L
.l-2.letter o
.l-3.letter a
.l-4.letter d
.l-5.letter i
.l-6.letter n
.l-7.letter g
.l-8.letter .
.l-9.letter .
.l-10.letter .
</template>
<script>
export default {}
</script>
<style lang="stylus">
.load
width: 100vw
height: 100vh
position: fixed
background: #fff
z-index 100
top 0
left: 0
display: flex
align-items: center
justify-content: center
.letter-holder
padding 16px
width: 200px
height: 200px
display: flex
align-items: center
justify-content: center
margin: auto
.letter
font-size 24px
margin-left: 5px
font-weight bold
color #000
animation-name loadingF
animation-duration 1.6s
animation-iteration-count infinite
animation-direction linear
.l-1
animation-delay 0.48s
.l-2
animation-delay 0.6s
.l-3
animation-delay 0.72s
.l-4
animation-delay 0.84s
.l-5
animation-delay 0.96s
.l-6
animation-delay 1.08s
.l-7
animation-delay 1.2s
.l-8
animation-delay 1.32s
.l-9
animation-delay 1.44s
.l-10
animation-delay 1.56s
@keyframes loadingF
0%
opacity 0
100%
opacity 1
</style>
デフォルトのlayoutを作成
layouts/default.vue
<template lang="pug">
div
.main
Header(ref="reference")
.nuxt
Nuxt
Footer
Loading(v-if="isShow")
</template>
<script>
import Loading from '~/components/ui/Loading.vue'
export default {
components: {
Loading,
},
data() {
return {
isShow: true,
}
},
</script>
<style lang="stylus">
div
.nuxt
max-width 1280px
margin 0 auto
</style>
.mainの要素をは最初は非表示にしておき、ローディング画面を表示させておくようにデータを設定します。
ここまでで、ローディングの画面のみ表示されていればOKです。
今の段階でローディング画面だけが表示されていない場合は、どこかがおかしいのでもう一度確認してみてください！
デフォルトのレイアウトで要素の読み込みが終わるまでリロードの画面を表示
画面が読み込まれるまでの処理は、一番はじめにも紹介しましたが、下記の方法になります。
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.isShow = false
}, 700)
})
},
処理の内容としては、要素がすべて読み込まれてから、0.7秒後にデータの変更を行います。
<template lang="pug">
div
.main
Header(ref="reference")
.nuxt
Nuxt
Footer
transition(name="home")
Loading(v-if="isShow")
</template>
<script>
import Loading from '~/components/ui/Loading.vue'
export default {
components: {
Loading,
},
data() {
return {
isShow: true,
}
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.isShow = false
}, 700)
})
},
}
</script>
<style lang="stylus">
div
.nuxt
max-width 1280px
margin 0 auto
.home-enter-active, .home-leave-active
transition: opacity .7s
.home-enter, .home-leave-active
opacity: 0
</style>
要素が読み込まれたときにisShowにtrueを入れることで、ローディン画面を非表示にします。
こうすることで、要素が読み込まれるまではローディング画面が表示され、読み込まれたタイミングでローディング画面が表示になりメインの要素が表示されます。
このとき、v-ifなどを使っていると、パチっと画面が切り替わって少しダサくなるので、
transitionを使うことで切り替えるときにゆったりしたアニメーションをつけることができます
まとめ
- ローディング中に表示させるための画面を作成
- デフォルトのレイアウトを作成
- デフォルトのレイアウトで要素の読み込みが終わるまでリロードの画面を表示
コメント