この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Vue.jsでローディングを表示
Webアプリにおいて、非同期処理を行うこと(APIを呼び出してデータを取得するなど)はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。
Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。
使い方
まずはVueプロジェクトが作成済みの前提で進めます。
以下のコマンドでインストールします。
$ yarn add vue-loading-template
あとは表示したいViewでモジュールをインポートして使います。
<template>
<div class="container">
// 使用
<vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px' }"></vue-loading>
</div>
</template>
<script>
// インポート
import { VueLoading } from 'vue-loading-template'
export default {
name: 'HelloWorld',
// componentsに登録
components: {
VueLoading
}
}
</script>
これで、以下のようにローディングアニメーションが表示されます。
他にも様々な種類のローディングが表示できます。デモサイトもありますので、こちらもご参照ください。
まとめ
「vue-loading」はローディングをサクッと使いたいときにオススメです。ぜひ使ってみてください。