Tech

Vuetify v-progress-circularでロード中表示をする書き方まとめ

2021年5月23日

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。

ローディングのスピナー(処理中のマーク)としても使用できます。

この記事では基本的な使い方を、コードを示しながらまとめています。

 

基本的な使い方

v-progress-circularは環状(円状)の形を表示するコンポーネントです。

円の中に数値や文字列を入れることもできます。

こんな感じに、ロード中などで回転させておけばロード中であることが一目瞭然です。

進捗状況などを線上に表示する v-progress-linear コンポーネントと使い分けたいところです。

Components Docs

API Docs

 

色やサイズなどの見た目を変える

円の大きさ

円の大きさはsize属性で変更できます。指定しない場合はデフォルトで32が設定されています。

<v-progress-circular
 :value="60"
 :size="17"
></v-progress-circular>

 

以下は :size を17, 30, 60, 90と変化させたときのサンプル。

 

円環の太さ

円環の太さはwidth属性で指定します。指定しない場合はデフォルトで4が設定されています。

<v-progress-circular
  value="60"
  width="8"
></v-progress-circular>

円環の色

円環の色はcolor属性で変更します。

指定できる値は組み込み値、もしくはCSSと同じようにカラーコードを指定します。Vuetifyで使える組み込み設定は「マテリアルカラー」と呼ばれるもので、こちらの公式ドキュメントから探し出せます。

<v-progress-circular
  value="60"
  color="light-blue lighten-1"
></v-progress-circular>

データと表現

無限回転

indeterminate プロパティを設定すると無限に回転するようになります。

<v-progress-circular
  indeterminate
>
</v-progress-circular>

円環の開始点

円の開始角度(塗りの開始点)を指定するにはrotate属性に値を指定します。

角度(0〜360)を指定します。

初期値は0です。

以下のサンプルでは左の円から右の円へvalueを20ずつ増加させています。

rotate="0"

rotate="90"

rotate="180"

ローディング中にスピナーを表示させる

v-progress-circularコンポーネントの使い方として多いのは、何かをロードしている最中に表示させるスピナーではないでしょうか。

 

画像の読込中にスピナーを表示させる

v-img コンポーネントで表示する画像の読込中にスピナーを表示させるには、プレースホルダーとして
v-progress-circular を指定します。

プレースホルダー用の v-slot(v-slot:placeholder)が用意されているのでそれを使います。

<v-img
  src="https://bad.src/not/valid"
  lazy-src="https://picsum.photos/id/1040/200/120?blur"
  aspect-ratio="1"
  class="grey lighten-2"
  max-width="400"
  max-height="220"
>
  <template v-slot:placeholder>
  <v-row
    class="fill-height ma-0"
    align="center"
    justify="center"
  >
    <v-progress-circular indeterminate color="grey lighten-5">
    </v-progress-circular>
  </v-row>
  </template>
</v-img>

以下のサンプルでは、無効な画像URLを指定してあり、無限にプレースホルダーが表示され続けるようになっています。

ちなみにVuetifyではローディング(ロード中)表示のデザインとして、以下のコンポーネントも使えます。

  • v-skeleton-loader(最近流行りの要素全体をもわもわさせる。YouTubeみたいな)
  • v-progress-linear(古き良きプログレスバー。進捗状況が明確な場合に)

 

まとめ

VuetifyのUIコンポーネント v-progress-circularの使い方をまとめました。

数値の表現のひとつとして、またはスピナーとして表示することで視覚的にユーザーフレンドリーなデザインをつくれるでしょう。

  • この記事を書いた人

nextpenguin

システム開発・プログラミングのしごとやっています。甘味とコーヒーは生命線。日常での学びを記事にしています。

人気の記事

1

先日の記事では、初心者からフリーランスプログラマーになる難しさと、それでもなんとか稼げるようになるにはどうしたらいいか解説しました。 今回の記事では、稼げるフリーランサーになるために必要な要素を、もう ...

2

気休めだけの甘い言葉は書きません。 最近は多くの企業やサイトで、使い捨てられるプログラマーが欲しいがために、甘い言葉で初心者プログラマを誘い出しています。 この記事では、まずは「現実」をちゃんと理解し ...

3

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。 ローディングのスピナー(処理中のマーク)として ...

4

※画像はずとまよの新曲とは一切関係ありません   ずっと真夜中でいいのに。(以下、ずとまよ)の新曲『勘ぐれい』のMVが12月1日に公開されましたね。 MV前に公開されていた原曲を聴き、神曲な ...

5

Vuexのstore(ストア)を使うと、各コンポーネント間で個別にデータのやり取りすることなく、データを一元的に管理できます。Vueでは欠かせない機能といえるでしょう。 state(変数、コンポーネン ...

-Tech

© 2021 スターレイヴ