概要
progressbar.js を試してみました
いろいろな形でプログレスバーを作成できるライブラリです
今回はサークルのプログレスバーを試してみました
HTML + JavaScript ファイルを作成して nginx の DocumentRoot に対してしてサクッと Chrome で確認します
環境
- Mac OS X 10.12.3
- Chrome 56.0.2924.87 (64-bit)
- progressbar.js 1.0.1
workspace 準備
- nginx
- cd /usr/local/var/www/
- mkdir p
- cd p
で作業します
nginx を想定しています
ライブラリインストール
- wget ‘https://raw.githubusercontent.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js’
index.html の作成
- vim index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<link href="./myprogress.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./progressbar.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="./myprogress.js"></script>
</body>
</html>container の div タグにプログレスバーを描画します
ダウンロードした progressbar.min.js のインクルードの他に自作の css と js とフォント用の CSS もインクルードしています
myprogress.js の作成
- vim myprogress.js
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
from: { color: '#aaa', width: 1 },
to: { color: '#848484', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 10);
if (value === 10) {
circle.setText('<font size="5px">Max</font><br><div align="center">' + value + '</div>');
} else {
circle.setText('<font size="5px">Containers</font><br><div align="center">' + value + '</div>');
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0描画のメイン処理になります
今回の記事のポイント部分になります
描画する id タグ container を指定して ProgressBar.Circle でオブジェクトを作成しています
その引数としていろいろな値を与えることでデザインがアニメーション速度などを変更することができます
最後の bar.animate でどこまで描画するか割合を指定します
1.0 なら最後まで描画します
myprogress.css の作成
- vim myprogress.css
#container {
margin: 20px;
width: 200px;
height: 200px;
position: relative;
}動作確認
あとはブラウザで http://localhost:8080/p/ にアクセスするとプログレスバーのデモが確認できると思います
最後に
progressbar.js を試してみました
アニメーションやデザインが今風でキレイなところが気に入りました
円グラフではないので、凡例などで 2 色分表示とかはできないみたいです
0 件のコメント:
コメントを投稿