勉強したことのメモ

webプログラマが勉強したことのメモ。

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

      2022/06/07

円形のプログレスバーを実装したかった。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部分で円形内のテキストを変更できる。

 

所感

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

 - JavaScript

  関連記事

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

leaflet.jsとosmでマップ表示及びマーカー設置

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

迷惑メール対策でフォームにreCAPTCHAを導入する方法

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...

javascriptの文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...