円形のプログレスバーを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 ...