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

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