ProgressBar.jsを使ってみた

円形のプログレスバー探してたら見つけたのでTry Inを参考に使い方をまとめる。

１．モジュールの読込み

ProgressBar.jsファイルの読み込みと、プログレスバーを表示する要素を準備する

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>

<div id="container"></div>

２．JavaScriptでプログレスバー作成

下記のコードで円状のプログレスバーが表示される。

var circle = new ProgressBar.Circle('#container', {
    color: '#FCB03C'
});

circle.animate(1.0); 

３．色々やってみる

１．上記の動作確認

まずは上記の動作確認をしてみた。
実行すると、円が描かれる。

２．回してみる

CSSで回転させながら、100％まで達したら逆回転で0％まで
サンプル

３．mouseoverで決定動作

そもそもこれがやりたかった。
各サークル上に一定時間マウスカーソルがあれば決定動作を行う。
サンプル

４．三角や四角

たぶん、Pathを使ってやるんだと思うけど現時点では分からず。
SVGを勉強してから再度トライ。