【JavaScript】プログレスバー｜シンプルなデザイン

投稿日 10月 9, 2023
更新日 1月 27, 2024
著者しんぺー
カテゴリー JavaScript
カテゴリー Uncategorized

プログレスバーを実装するのに、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;