Help us understand the problem. What is going on with this article?

【Vue.js】ローディング画面の実装方法(サンプルコード付き)

はじめに

Vue.jsでローディング画面を実装する方法をサンプルコード付きでまとめました。

今回ローディングのモジュールはvue-loading-templateを使っています。

image.png
デモはこちらから確認出来ます。

環境

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0

vue-loading-templateのインストール

$ yarn add vue-loading-template

1.src/App.vue

App.vue
<template>
  <v-app>
    <Loading v-show="loading"></Loading>
    <Home v-show="!loading"></Home>
  </v-app>
</template>

<script>

import Loading from '@/components/Loading'
import Home from './views/Home'

export default {
  name: 'App',
  data() {
    return {
      loading: true,
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
  },
  components: {
    Loading,
    Home,
  },
};
</script>

前提

  • Vuetifyを使用しているので、<v-app>でくくられている

  • Loadingローディング画面コンポーネント

  • Homeアプリケーション本体をまとめているコンポーネント

ローディング画面の切り替え方法

  • v-showを使用し、変数loadingtruefalseかでローディング画面の表示・非表示を行う

  • 切り替えはmountedを使用

  • mountedはDOMの作成が完了した段階で発動するので、
    DOMの作成が完了した段階でloadingfalseになり、ローディング画面が非表示になる

2.src/components/Loading.vue

こちらがローディング画面のコンポーネントです。

Loading.vue
<template>
  <div v-show="loading">
    <div class="fullview">
      <div class="loading-spacer"></div>
      <vue-loading 
        type="spiningDubbles"
        color="#aaa"
        :size="{ width: '100px', height: '100px' }"
        >
      </vue-loading>
    </div>
  </div>
</template>

<script>
import { VueLoading } from 'vue-loading-template'

export default {
  name: 'loading',
  components: {
    VueLoading,
  },

}
</script>

<style>
.fullview {
  width: 100%;
  height: 100%;
  background: #fefefe;
  position: fixed;
  top: 0;
  left: 0;
}
.loading-spacer {
  height: 30%;
}
</style>
  • VueLoadingをインポート

  • <vue-loading>内で各種オプションを指定し、ローディングアニメーションの種類・色や大きさを指定

  • <div class="loading-spacer">はローディングアニメーションを画面上部から任意の位置に持ってくるために利用

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

ローディングアニメーションはspiningDubblesが好きです:v:

参考にさせて頂いたサイト(いつもありがとうございます)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした