プラグインに頼らずにプログレスバーを作る

このメーターなんて言うんでしょう?進捗バー?プログレスバー?を作りました。
特定の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します。

参考サイト

これで完璧!JavaScriptの「split()」で文字列の分割を極めるコツ! | 侍エンジニア塾ブログ

【javascript】配列と文字列の変換 – Qiita

  • コーダーのための計算機