上記の記事では、単純に v-progress-circular というコンポーネントの使用方法について
シンプルな基本形を例に書きましたが、
今回はそこに様々な props を渡して、カスタマイズするという内容です。

それでは次のセクションから、v-progress-circular に渡す事ができる様々な props について、書いていきます。

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

円形プログレスの色を変える

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

円形プログレスの色を変えるには、color という
prop を使用します。
指定できる色は、16進数、rgba、hslaなどcssで指定できる値や、
Vuetifyで定義されている Material Color の色名が使用できます。

<v-progress-circular :value="progressA" color="pink">
</v-progress-circular>

<v-progress-circular v-model="progressB" color="hsla(200, 80%, 50%, 1)">
</v-progress-circular>

<v-progress-circular value="50" color="indigo">
</v-progress-circular>

円形プログレスの大きさを変える

円形プログレスの大きさを変えるには、size という
prop を使用します。渡した値が、pxに変換されて描画されます。
つまり次の例では、80pxの円形プログレス表示ができる、ということです。
（デフォルトサイズは32px）

ちなみに、:size または v-bind:size としてあげれば、
data を動的に渡して使うこともできます。

<v-progress-circular :value="progressA" color="pink" :size="80">
  {{ progressA }}
</v-progress-circular>

円形プログレスのバーの太さを変える

円形プログレスのバーの太さを変えるには、width という
prop を使用します。
（デフォルトサイズは4px、やや細めです）

<v-progress-circular :value="progressA" color="pink" size="100" width="16">
  {{ progressA }}
</v-progress-circular>

円形プログレスをアニメーションさせる

indeterminate という
prop を使用すると、円形プログレスをアニメーションさせる事ができます。

これは、データと連携させても良いですが、
ローディングスピナー的な使い方にも応用できそうですね。

使い方は、単純に indeterminate と指定を加えるだけです。

<v-progress-circular v-model="progressB" color="amber" size="100" indeterminate>
  {{ progressB }}
</v-progress-circular>

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

上記のサンプルコードを元に v-progress-circular のサンプルを作成してみました。
次のリンクより、見ることができます。
Vuetify の v-progress-circular のサンプル

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

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

Progress circular コンポーネント — Vuetify

また、次のv-progress-circular APIページでは、指定することのできる props の一覧が掲載されています。
v-progress-circular API — Vuetify

この記事のまとめ

今回は、以前書いた記事：
[Vue.js]Vuetifyで円形のプログレス（進捗）表示を使用する方法[v-progress-circular]
の続編として、
Vuetifyで v-progress-circular を使って作成した
円形のプログレス（進捗）表示に、様々なオプション(厳密には props と呼ばれるもの)を指定して
色やサイズを変更したり、アニメーションさせたりするカスタマイズの方法について、書いてみました。

ローディングの進捗や
データを円形のバーとして表示する場合などに、
手軽に使えるUIコンポーネントだと思います。

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

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