
プログレスバーを実装するのに、ProgressBar.jsを使ったけど、Barが角丸にできなかったり使い勝手わるいなぁ。シンプルなデザインだし自分で作れないかな?

しんぺー
簡単につくれますよ。
使いまわしやすいテンプレを置いておきますね。
実装後のイメージ
こんな感じのプログレスバーをJavaScriptで作成します。
HTMLにある「現在」の数値を変更すればBarもそれに合わせて変わるので運用もしやすいと思います。
順番に解説していきますね。
See the Pen Untitled by shimpei (@shimpei) on CodePen.
HTML
HTMLはこんな感じです。
JavaScriptで使用する箇所はIDにしました。
<div>現在<span id="Current">978</span>円</div> <div>目標<span id="Goal">2000</span>円まで</div> <div>あと<span id="Diff"></span>円</div> <div class="progress"> <div class="bar" id="Bar"></div> </div>
SCSS(CSS)
一応SCSS。
こんな感じです。テキトーです。
.progress { border-radius: 30px; height: 40px; background: #ddd; overflow: hidden; } .bar { background: #FFC100; border-radius: inherit; height: 100%; width: 0%; transition: 2s; }
JavaScript
JavaScriptはこんな感じです。
それぞれ必要な値を取得して、簡単な計算をしています。
Barの長さは現在の値をwidthに入れているだけです。
BarにはCSSでtransitionを入れているのでなめらかに動きます。JSのsetIntervalを使うより簡単かと思います。
function move() { const current = parseInt(document.getElementById('Current').textContent); const goal = parseInt(document.getElementById('Goal').textContent); const diffElement = document.getElementById('Diff'); const diff = goal - current; const widthPercentage = (current / goal) * 100; document.getElementById('Bar').style.width = widthPercentage + '%'; diffElement.textContent = diff; } window.onload = move;
JavaScript本格入門
JavaScript 第7版
1冊ですべて身につくJavaScript入門講座
独習JavaScript
最後に

今回はシンプルで簡単ですが使い勝手良さそうなProgressBarを紹介しました。
この記事があなたの助けやヒントになっていると幸いです。
最後までありがとうございました。