円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。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部分で円形内のテキストを変更できる。
所感
本プラグインは円形以外にも四角、三角のプログレスバー等も実装できる模様。また、公式サイトにはそれぞれサンプルが用意されているので助かった。
関連記事
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
3Dデータ(obj,stlファイル)をブラウザ上で表示する方法
3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...
-
-
javascriptで論理和演算子の特殊な使い方
論理和「||」の特殊な使い方を教わったのでメモ。 普段使うのは、 if (a = ...
-
-
テキストエリアのリアルタイムプレビュー
テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...
-
-
Chart.jsでグラフの描写
JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...
-
-
JavaScriptでUNIXタイムスタンプ取得
UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...
-
-
JavaScriptで画像に光沢をつける(glossy.js)
凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
JavaScriptでinputタグのtypeを変更
チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...