Vue.jsでローディング画面作ってみた

初投稿です。
御見苦しいところなどあればすみません…

仕事でVue.jsを使ってSPAを作っていた際に、どうしても少し時間がかかってしまう処理を行っている間に別の操作をさせたくなかったので、ローディング画面を表示させて他の操作を実行できないようにしました。

そのとき使った「vue-loading」が便利だったのでご紹介。
##インストール##
以下のコマンドでインストール

yarnの場合

yarn add vue-loading-template

npmの場合

npm install vue-loading-template

##使い方##
他のモジュールと同様に使いたいViewでインストールして使います。

今回は、親のコンポーネントから受け取ったisLoadingがtrueの場合、全体にマスクしてクルクルを表示させました。

Loading.vue

<template>
  <div class="modal-mask" v-if="isLoading === true">
    <div class="loading">
      <vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px'}"></vue-loading>
    </div>
  </div>
</template>

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

export default {
  props: {
    isLoading: Boolean,
  },
  components: {
    VueLoading
  },
}
</script>

<style scoped>
.modal-mask {
  z-index:1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

これだけでロード中とわかりやすいクルクルを表示できます。便利…
他の表示パターンもあるので、デモサイトを見てみてください。

##参考文献##
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方
GitHub jkchao/vue-loading