## はじめに
今回は、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"

## プロジェクトの作成
```bash
vue create .
vue add vuetify
```

## プログラム
```App.vue```を次のように変更します。
```markup
<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](//images.ctfassets.net/p6xsvcchdqws/5cUwahYKnv52iDHMHUvxap/050ff8692bd3b6334d7e63bb078c5cea/____________________________0004-06-07_11.19.56.png)

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

Vuetifyのv-progress-circularを使って、ローディング表示を実装してみます

Vue.js

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