nuxtでパラメータ1つのアニメーション付き円グラフ描いてみた

結論

SVGの「stroke-dasharray」属性を利用する。

• setIntervalでstroke-dasharrayの値を変化させる
• 「stroke-dasharray」は円周長なので、直径x円周率xパーセンテージ/100で求められる
• svgについては、viewBox属性、stroke-dasharray属性、circleタグについてググればOK

herokuにサンプルを上げました。