■ はじめに
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