プラグインに頼らずにプログレスバーを作る
このメーターなんて言うんでしょう?進捗バー?プログレスバー?を作りました。
特定のclassを入れることで、バーの長さとパーセントを動的に出してくれます。作ってて楽しかった。
See the Pen 180501_プログレスバー by nekuta (@nekuta) on CodePen.
プログレスバーの動き
js
//.metarの数だけ処理を回す
var metar = $('.meter');
for (var i = 0; i < metar.length; i++) {
a(i);
}
//meterのi番目の全てのclassを取得
//.split(' ')でスペースで区切る
function a(i) {
var metarClass = metar.eq(i).attr('class');
var classArray = metarClass.split(' ');
var classMatch = [];
//classArrayの分だけ処理を回す
//meter-というclassを含む時にそれをpushする
//※meter-80やmeter-40がpushされる
for (var n = 0; n < classArray.length; n++) {
if (classArray[n].match(/meter-/)) {
classMatch.push(classArray[n]);
}
}
//配列を文字列に変換
//num.slice(-2)で下二桁だけとりだす
//※meter-80なら「80」を取り出す
//meter-100だった時は100を入れる
var num = classMatch.join(',');
var metarNum = num.slice(-2);
if (metarNum == 00) {
var metarNum = 100;
}
//metarNumの分だけwidthをanimateする
function action() {
$('.meter-line-inner').eq(i).animate({
width: metarNum + '%'
}, 1000, 'swing');
$('.meter-percent').eq(i).animate({
left: metarNum + '%'
}, 1000, 'swing');
}
action();
meter-80やmeter-40などのクラスから判別してメーターのwidthを決めています。
meter-80なら80%、meter-40なら40%のバーになります。
パーセントの動き
js
//パーセントの表示 //setIntervalでカウントアップさせる
//$('.meter-num')内の数字からmetarNumまでカウントする
function numCount() {
var num = 0;
var speed = 10;
var count = setInterval(function() {
$('.meter-num').eq(i).text(num);
num++;
if (num > metarNum) {
clearInterval(count);
}
}, speed);
}
numCount();
せっかくなのでパーセントをカウントアップさせます。
setIntervalを使い、numから各metarNumまでカウントさせます。
numがmetarNumを超えたらclearIntervalします。