円形のプログレスバーをprogressbar.jsで実装する方法
2024/04/15
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあったけど、その辺りは知識があまり無いのでJavaScriptもしくはjQueryで何とかしたい。調べてみたところprogressbar.jsというのが良さげ。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/progressbar/
公式サイト
https://kimmobrunfeldt.github.io/progressbar.js/
CDNでの呼び出し方法
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/progressbar.js/1.1.0
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>progressbar.jsサンプル</title>
<style>
#progressbar{
width: 100px;
height: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
<script>
var bar = new ProgressBar.Circle(progressbar, {
color: '#aaa',
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 5000, //100％になるまでの秒数
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if( value === 0 ){
circle.setText('');
}else{
circle.setText(value + '%');
}
}
});
bar.text.style.fontSize = '1rem';
bar.animate(1.0);
</script>
</body>
</html>circle.setText部分で円形内のテキストを変更できる。
所感
本プラグインは円形以外にも四角、三角のプログレスバー等も実装できる模様。また、公式サイトにはそれぞれサンプルが用意されているので助かった。
関連記事
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...