【Vuetify】v-progress-circularを使って簡単にローディング表示を実装する

はじめに

今回は、Vuetifyのv-progress-circularを使って、ローディング表示を実装してみます。とっても簡単なので皆さんもやってみてください。

Vuetify

Vuetifyは、Vue.js用のUIフレームワークです。マテリアルデザインに準拠しているため、きれいなページを簡単に作れます。

検証環境

• 機種: MacBook Air(m1)
• OS: MacOS Monterey(12.3.1)
• メモリ: 8GB
• @vue/cli: 5.0.4
• "vue": "^2.6.14",
• "vuetify": "^2.6.0"

プロジェクトの作成

vue create .
vue add vuetify

プログラム

App.vueを次のように変更します。

<template>
  <v-app>
    <v-overlay :value="isLoading">
      <v-progress-circular indeterminate size="64" />
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    isLoading: true,
  }),
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);
  },
};
</script>

結果

静止画ですが、画像のようなローディング表示が表示されて、1秒後に消えるはずです。

おわりに

Vuetifyのv-progress-circularを使えば、簡単にローディング表示を実装できました。皆さまも是非ご活用ください。