MENTAのプロフィールをもっと細かく登録できるように改良開発中です。
image

登録している内容にあわせてプログレスをグラフでわかりやすく表現しようとしていたところ、CSSだけでドーナツグラフがつくれる「Pure CSS Percentage Circle」が便利でした。
image

サイトからCSS一式をダウンロードして、

<link rel="stylesheet" href="css/circle.css">

<div class="c100 p50 big">
    <span>50%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

classを指定するだけ。

CSSなので、色やフォントサイズなどは直接CSSを編集すればいいのでカスタマイズしやすいのもGoodでした。

Pure CSS Percentage Circle