🌀
Nuxt.js(Composition API)でGIF画像を使ったローディング画面を自作する
今回の題材
Nuxt.js でGIF画像を使ったローディングコンポーネントを自作してみます。
完成イメージ
画像ギャラリーサイトでスクロールが一定以上に差し掛かるとAPIを叩いてローディングが走る際に利用するコンポーネントを想定して作りました。
実際のコード
今回のコード例はローディングGIF画像とコンポーネントのみです🙋♀️
ローディング用のGIF画像の調達先
実際のローディングコンポーネントで表示する歯車のGIF画像は以下のサイトのものを利用しています。
バリエーションも豊富でアプリケーションの種類に沿ったローディング画面を作りたい時に便利なのでオススメです👍
Loading.vue
ローディング状態にするかどうかのフラグを受け取って表示制御を行う想定のコンポーネントです。
<template>
<div v-if="isLoading" class="loading-container">
<img src="@/assets/images/loading.gif" />
<h2 class="loading-text">Loading...</h2>
</div>
</template>
<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
export default defineComponent({
name: 'Loading',
props: {
isLoading: {
type: Boolean,
default: false,
},
},
})
</script>
<style>
.loading-container {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100vh;
z-index: 50;
overflow: hidden;
background-color: rgba(55, 65, 81, 1);
opacity: 0.75;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loading-text {
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 1.25rem /* 20px */;
line-height: 1.75rem /* 28px */;
font-weight: 600;
}
</style>
利用する場合
親コンポーネントでAPIを呼んでフラグを更新した後、Loadingコンポーネントにフラグをpropsで渡せばOK🙆♀️
親コンポーネントでの利用例
<template>
<div>
<!-- 中略 -->
<Loading :is-loading="isLoading" />
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
} from '@nuxtjs/composition-api'
import Loading from '@/components/Loading.vue'
export default defineComponent({
components: {
Loading,
},
setup() {
const isLoading = ref(false)
// 何らかのAPI叩く処理内で isLoading.value = true する
まとめ
以前にTailwind CSSのコンポーネントカタログをアレンジしてそれっぽいローディング画面を作ってみたのですが汎用的過ぎて、逆にアプリケーションの内容に沿ったGIF画像を表示した方が雰囲気出るし自作してみたい！と思ったので今回挑戦してみました💪
皆さんもご自身が作りたいアプリケーションに合わせた自作ローディング画面を試してみてはいかがでしょうか🔧
Discussion