投稿日更新日

【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-loading

おわりに

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

© 2022 はるとんのブログ