Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状（円状）のデザインで教えてくれるUIデザインです。
ローディングのスピナー（処理中のマーク）としても使用できます。
この記事では基本的な使い方を、コードを示しながらまとめています。
基本的な使い方
v-progress-circularは環状（円状）の形を表示するコンポーネントです。
円の中に数値や文字列を入れることもできます。
こんな感じに、ロード中などで回転させておけばロード中であることが一目瞭然です。
進捗状況などを線上に表示する v-progress-linear コンポーネントと使い分けたいところです。
色やサイズなどの見た目を変える
円の大きさ
円の大きさは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の使い方をまとめました。
数値の表現のひとつとして、またはスピナーとして表示することで視覚的にユーザーフレンドリーなデザインをつくれるでしょう。
