2012年8月21日火曜日

【JavaScript】faviconeを円グラフにできるpieconを使ってみた(サンプルあり)

git clone git://github.com/lipka/piecon.git
cp -ip piecon/piecon.min.js /usr/local/tomcat/webapps/ROOT/
cd /usr/local/tomcat/webapps/ROOT/
wget http://kakakikikeke.blogspot.jp/favicon.ico
emacs index.html

<head>
<link rel="icon" href="favicon.ico" />
<script src="./piecon.min.js"></script>
<script>
(function(){
  var count = 0;
  Piecon.setOptions({color: '#ff0084', background: '#bbb', shadow: '#fff', fallback: 'force'});
  var i = setInterval(function(){
    if (++count > 100) {
      Piecon.reset();
      clearInterval(i);
      return false;
    }
  Piecon.setProgress(count);
}, 250);
})();
</script>
</head>


■ポイント
  • favicon.icoはあれば何でも問題ないです
  • デフォルトでは100秒で円グラフが完了する設定になっています
  • 速度は引数2つ目250のところを小さくすると早くなります
  • Piecon.setOptionsで色を設定できます
  • デフォルトだとonLoad後に呼ばれる(っぽいのでロードの進捗率を表示するのは厳しいか)
  • ⇒ボタンをポチポチ押していくと進捗があがるみたいなアンケートページに使えるのか・・・
https://github.com/lipka/piecon
公式は以下です


0 件のコメント:

コメントを投稿