v-progress-circulerのサンプル

Vuetifyの円形プログレス（進捗）表示のサンプル(v-progress-circular)

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

width という prop を使用します。渡した値が、pxに変換されて描画されます。

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

Vuetifyが持っているMaterialColorの色名による指定/cssによる指定の例です。
（ 左から pink, hsla(200, 80%, 50%, 1), indigo ）

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

size という prop を使用します。渡した値が、pxに変換されて描画されます。
{{ progressA }}
{{ progressB }}
75

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

width という prop を使用します。渡した値が、pxに変換されて描画されます。
{{ progressA }}
{{ progressB }}
88%