勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

円形のプログレスバーをprogressbar.jsで実装する方法

   2024/04/15  JavaScript

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあったけど、その辺りは知識があまり無いのでJavaScriptもしくはjQueryで何とかしたい。調べてみたところprogressbar.jsというのが良さげ。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/progressbar/

 

公式サイト

https://kimmobrunfeldt.github.io/progressbar.js/

 

CDNでの呼び出し方法

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
<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

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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部分で円形内のテキストを変更できる。

 

所感

本プラグインは円形以外にも四角、三角のプログレスバー等も実装できる模様。また、公式サイトにはそれぞれサンプルが用意されているので助かった。

 - JavaScript

  関連記事

JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法

JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...

JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法

JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...

JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法

JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

S