この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

以前の記事では、Vuetifyで使用可能な「線形のプログレス（進捗）表示」について、ご紹介しました。
[Vue.js]Vuetifyで使用できるプログレス（進捗）表示[v-progress-linear]

上のリンク先の記事でもご紹介している事ですが、
Vuetifyで使用可能な「プログレス（進捗）表示」は、次の2種類があります。
・円形の図形で進捗度合を表示できる、v-progress-circular
・バーで進捗度合を表示できる、v-progress-linear

今回は、その2つのうち
円形の図形で進捗度合を表現することができる
v-progress-circular についての記事になります。

それでは次のセクションから、v-progress-circularの使用方法について書いていきます。

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

円形の図形で進捗度合を表現することができる v-progress-circular

早速、用例です。
v-progress-circularの、シンプルな用例は、次の通りです。
Vue.jsの単一コンポーネント、template 内に記載する想定です。

<template>
  <!-- 進捗度に応じて以下のように value="***" として値を渡します -->
  <div style="display: flex; justify-content: space-between; margin: 2rem auto; width: 560px;">
    <div style="margin: 0 0; padding: 2rem;">
      <v-progress-circular value="30"></v-progress-circular>
    </div>
    <div style="margin: 0 0; padding: 2rem;">
      <v-progress-circular value="60"></v-progress-circular>
    </div>
    <div style="margin: 0 0; padding: 2rem;">
      <v-progress-circular value="100"></v-progress-circular>
    </div>
  </div>
</template>

↑2行目に記載してあるコメントアウトの通り、value という prop に 0 ~ 100 までの値を渡すことで、円形のプログレス（進捗）表示を使用することができます。
(実際に試した際にわかりやすくするため、適当な値の style をつけた div で囲っていますが、この部分は必須ではありません)

そして実案件で使用する際には、
value という prop に渡す値は
Vue.js の data として用意しておき、それを動的に渡して使うことになると思います。

その例としては、例えば次のように書く形になるかと思います。

[html(Vue.jsのtemplate)側]

<template>
<div style="display: flex; justify-content: space-between; margin: 2rem auto; width: 560px;">
  <div style="margin: 0 0; padding: 2rem;">
    <v-progress-circular :value="progressA"></v-progress-circular>
  </div>
  <div style="margin: 0 0; padding: 2rem;">
    <v-progress-circular v-model="progressB"></v-progress-circular>
  </div>
</div>
</template>

↑以前の v-progress-linear の記事 でご紹介した内容と同じく、
v-bind で紐づけても良いですし(4行目の例)、
7行目の例のように v-model で値を渡しても良いです。

dataは例によって、次のような感じで数値(number)を渡せるものを用意しておけば
大丈夫です(もちろんdata名は何でも可)。

[html(Vue.jsのtemplate)側]

data: () => ({
  progressA: 25,
  progressB: 88
}),
// （...省略_computed や mounted が続く想定...）

v-progress-circular は、
上記のシンプルな例の他にも、
進捗度合いの数字を%で表示したり、
バーの色を変えたり、

といった多くの props が存在しています。

それについてはまた、続編の記事で書いていきたいと思ってます。

実際に表示してみた v-progress-circular のサンプル

v-progress-circular のサンプルを作成してみました。
実際に動いている様子を次のリンクより、見ることができます。
（サンプルコードは続編の記事でご紹介しています。そちらも併せてご覧ください。）
Vuetify の v-progress-circular のサンプル

v-progress-circular の公式解説ページ

v-progress-circular の Vuetify 公式解説ページは、次のリンク先になります。

Progress circular コンポーネント — Vuetify

この記事のまとめ

今回は、
Vuetifyの数々の優れたUIコンポーネントの中から
円形の図形によって進捗度合を表現することが可能な v-progress-circular について、
基本の形の例をあげて、記事を書きました。

今後書く予定の続編の記事では、
v-progress-circular が実際に動いているサンプルや、
その他の props を加えた状態も試してみる予定ですので、またぜひご覧ください。

当サイトでは、今後も Vue.js や Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。