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

このメーターなんて言うんでしょう?進捗バー?プログレスバー?を作りました。
特定のclassを入れることで、バーの長さとパーセントを動的に出してくれます。作ってて楽しかった。

See the Pen 180501_プログレスバー by nekuta (@nekuta) on CodePen.

プログレスバーの動き

js

meter-80やmeter-40などのクラスから判別してメーターのwidthを決めています。
meter-80なら80%、meter-40なら40%のバーになります。

パーセントの動き

js

せっかくなのでパーセントをカウントアップさせます。
setIntervalを使い、numから各metarNumまでカウントさせます。
numがmetarNumを超えたらclearIntervalします。

参考サイト

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

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

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