Vue.jsでローディング表示を実装する

2020/9/2 更新 2020/5/6 作成

Tags : JavaScript Vue css

このエントリーをはてなブックマークに追加

ローディング表示モジュールの調査

vue.jsでローディング表示を行う場合、ローディング表示に関係するモジュールについて調査する。 出来れば、

  • 実装が簡単
  • よく見かけるような見た目(独自性がない)
  • メンテされている

という条件にあてはまるものを採用したい。

調べた結果を以下の表にまとめた。

名前 種類 GitHub Star 最終更新(2020/05/06時点) 備考
vue-loading Vueコンポーネント 2018/12/22 紹介している記事が多い
vue-spinner Vueコンポーネント 2017/10/07 Vue2.0をサポートしていない
Single Element CSS Spinners css 2019/12/09 よく見かける見た目
vue-loading-overlay Vueコンポーネント 2020/04/18 全画面に表示するらしい
vue-wait Vueコンポーネント 2019/10/08 だいぶ機能がリッチそう
ajaxload.info gif - - よく見かける見た目

調べて出てきた候補は以上。

今回は見た目が個人的に好み+cssなので、レスポンシブに対応しやすそうという理由でSingle Element CSS Spinnersを使うことにする。

実装

cssの読み込みについて今回はBladeテンプレートファイルで行う。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

あとは単一ファイルコンポーネントの方で、ロード表示を行いたところに以下のように処理を追加する。

<template>
...
  <div class="loader" v-if="!posts.length">Loading...</div>
...
</template>

なお、上の例ではdataプロパティにpostsというオブジェクトを持っており、ロード前は空配列になっている。
そのため、postsが空配列の場合は、ローディング表示を行うような処理になっている。

空配列の判定は以下の記事を参考にさせたいただいた。

また、ロード前が空配列ではなく、nullになっている場合は、以下のように実装した。

<div class="loader" v-if="!post">Loading...</div>

nullの判定は以下の記事を参考にさせていただいた。

また、今回実際に実装したサイトは以下のサイトになる。
ローディングが必要な箇所に簡易的なローディング表示を行っている。

シェア
このエントリーをはてなブックマークに追加

関連記事一覧

html要素の背景色が変化するアニメーションをCSSで(無理やり)実装する

Chromeからactix-webにHTTPリクエストを実行した際に発生したCORSエラーの解消

サイトをスマホで表示したとき下端にメニューバーが表示されるようにする

Chart.jsで時刻データを扱う

Vue.jsを使ったSPAにおいてTwitter等でのリンク表示がいい感じになるようにする

Chart.jsで横軸が日付のグラフを作成する

Laravel+Vue.jsでSPA(シングルページアプリケーション)を作成した

Laravel+Vue.jsでLighthouseのスコアを0点から97点にした(バンドルサイズ削減)