kakakikikekeのブログ: 【JavaScript】faviconeを円グラフにできるpieconを使ってみた（サンプルあり）

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
公式は以下です

kakakikikekeのブログ

2012年8月21日火曜日

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

0 件のコメント:

コメントを投稿