【Vue】Vuetify ~ ローディング中の表示 ~

■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/26/000242
https://dk521123.hatenablog.com/entry/2021/02/14/180324
https://dk521123.hatenablog.com/entry/2021/02/21/162236
https://dk521123.hatenablog.com/entry/2021/02/20/000000
https://dk521123.hatenablog.com/entry/2021/03/01/225352

の続き。

Vuetify で、ローディング中の表示に関して、
v-skeleton-loader など色々揃っているようなのでメモ。

目次

【1】v-skeleton-loader
【2】v-progress-circular
【3】v-progress-linear

【1】v-skeleton-loader

YouTubeでも同じことやっている。

API仕様
https://vuetifyjs.com/ja/components/skeleton-loaders/
https://vuetifyjs.com/ja/api/v-skeleton-loader/
サンプル

<template>
  <div>
    <div v-if="!isVisible">
      <v-sheet
        color="grey lighten-4"
        class="pa-3"
      >
        <v-skeleton-loader
          class="mx-auto"
          max-width="300"
          type="card"
          loading="true"
          transition="scale-transition"
        ></v-skeleton-loader>
      </v-sheet>
    </div>
    <div v-else>
      <v-sheet
        color="grey lighten-4"
        class="pa-3"
      >
        <v-card
          class="mx-auto"
          max-width="300"
        >
          <v-img
            src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
            height="200px"
          ></v-img>
          <v-card-title>
            Hello World!
          </v-card-title>
        </v-card>
      </v-sheet>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
  isVisible = false;

  created() {
    // 疑似的にローディング処理
    setTimeout(() => {
      this.isVisible = true;
    }, 6000);
  }
}
</script>

【2】v-progress-circular

* グルグルまわるやつ

API仕様
https://vuetifyjs.com/ja/components/progress-circular/

【3】v-progress-linear

* これもひと昔前のYouTubeで使ってた棒のやつ

API仕様
https://vuetifyjs.com/ja/components/progress-linear/

関連記事

Vue.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vuetify ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/12/26/000242
Vuetify ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2021/02/21/162236
Vuetify ~ コンポーネント編 ~
https://dk521123.hatenablog.com/entry/2021/02/14/180324
Vuetify ~ ユーザへの通知 ~
https://dk521123.hatenablog.com/entry/2021/03/01/225352
Vuetify に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/08/000000