初心者でもできる！JavaScriptプログレスバーの作り方10選

JavaScriptでプログレスバーを手軽に作る方法JS
2023.05.01
この記事は約15分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptを使ってプログレスバーを作成する方法が身につきます。

プログレスバーは、タスクの進捗や読み込み状況を視覚的に表示するためのバーで、Webページで多く使われています。

初心者でもできる10種類のプログレスバー作成方法をご紹介しますので、ぜひチャレンジしてみてください。

●JavaScriptでのプログレスバーとは

JavaScriptでのプログレスバーは、Webページの進捗状況や読み込み状態を示すバーのことです。

JavaScriptを使って動的に更新することができ、読み込み速度やユーザーの操作に応じてバーの長さや色が変わります。

●プログレスバーの基本的な作り方

○サンプルコード1：シンプルなプログレスバー

このコードでは、HTMLとJavaScriptを使ってシンプルなプログレスバーを作成する方法を紹介しています。

この例では、<progress>タグを使用してプログレスバーを作成し、JavaScriptでその値を更新しています。

<!DOCTYPE html>
<html>
<head>
<style>
  progress {
    width: 100%;
    height: 30px;
  }
</style>
</head>
<body>

<progress id="myProgress" max="100" value="0"></progress>

<script>
  function updateProgress() {
    var progress = document.getElementById("myProgress");
    progress.value += 10;
  }
  setInterval(updateProgress, 1000);
</script>

</body>
</html>

○サンプルコード2：ステップごとのプログレスバー

このコードでは、JavaScriptを使ってステップごとにプログレスバーの値を更新する方法を紹介しています。

この例では、ボタンをクリックするたびにプログレスバーの値が10ずつ増えるようにしています。

<!DOCTYPE html>
<html>
<head>
<style>
  progress {
    width: 100%;
    height: 30px;
  }
</style>
</head>
<body>

<progress id="myProgress" max="100" value="0"></progress>
<button onclick="updateProgress()">次のステップへ</button>

<script>
  function updateProgress() {
    var progress = document.getElementById("myProgress");
    progress.value += 10;
  }
</script>

</body>
</html>

●プログレスバーの応用例

○サンプルコード3：アニメーション付きプログレスバー

このコードでは、CSSアニメーションを利用して、アニメーション効果を持つプログレスバーを作成しています。

この例では、@keyframesを使い、プログレスバーの背景色にグラデーションを適用し、アニメーションさせています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress-bar {
    width: 100%;
    height: 30px;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
    animation: progress-animation 2s linear infinite;
  }

  @keyframes progress-animation {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }
</style>
</head>
<body>

<div class="progress-bar"></div>

</body>
</html>

○サンプルコード4：円形プログレスバー

このコードでは、SVGを使って円形のプログレスバーを作成する方法を紹介しています。

この例では、<circle>タグを使って円形の進捗バーを作成し、JavaScriptでその値を更新しています。

<!DOCTYPE html>
<html>
<head>
<style>
  svg {
    width: 100px;
    height: 100px;
  }
  .progress-ring__circle {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    stroke-linecap: round;
  }
</style>
</head>
<body>

<svg>
  <circle cx="50" cy="50" r="50" fill="none" stroke="lightgrey" stroke-width="10" />
  <circle id="progressCircle" class="progress-ring__circle" cx="50" cy="50" r="50" fill="none" stroke="blue" stroke-width="10" />
</svg>

<script>
  function updateProgress(value) {
    var progressCircle = document.getElementById("progressCircle");
    var circumference = 2 * Math.PI * progressCircle.r.baseVal.value;
    var offset = circumference - (value / 100 * circumference);
    progressCircle.style.strokeDashoffset = offset;
  }
  setInterval(function() {
    var value = Math.floor(Math.random() * 101);
    updateProgress(value);
  }, 1000);
</script>

</body>
</html>

○サンプルコード5：ストライプ模様のプログレスバー

このコードでは、CSSのlinear-gradient()関数を活用してストライプ模様のプログレスバーを実装しています。

この例では、プログレスバーの背景にストライプ模様を適用し、進捗状況を表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 30px;
    background-image: linear-gradient(135deg, lightgray 25%, transparent 25%, transparent 50%, lightgray 50%, lightgray 75%, transparent 75%, transparent);
    background-size: 40px 40px;
  }

  .progress-inner {
    height: 100%;
    background-color: blue;
  }
</style>
</head>
<body>

<div class="progress">
  <div class="progress-inner" style="width: 50%;"></div>
</div>

</body>
</html>

○サンプルコード6：複数のプログレスバーを並べる

このコードでは、複数のプログレスバーを並べて表示する方法を紹介しています。

この例では、HTMLで複数のプログレスバー要素を作成し、それぞれに異なる進捗値を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 30px;
    background-color: lightgray;
    margin-bottom: 10px;
  }

  .progress-inner {
    height: 100%;
    background-color: blue;
  }
</style>
</head>
<body>

<div class="progress">
  <div class="progress-inner" style="width: 30%;"></div>
</div>
<div class="progress">
  <div class="progress-inner" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-inner" style="width: 90%;"></div>
</div>

</body>
</html>

○サンプルコード7：カスタムカラーのプログレスバー

このコードでは、プログレスバーの色をカスタマイズする方法を紹介しています。

この例では、CSSでプログレスバーの内部要素の背景色を変更し、異なる色のプログレスバーを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 30px;
    background-color: lightgray;
    margin-bottom: 10px;
  }

  .progress-inner {
    height: 100%;
  }

  .red {
    background-color: red;
  }

  .green {
    background-color: green;
  }

  .blue {
    background-color: blue;
  }
</style>
</head>
<body>

<div class="progress">
  <div class="progress-inner red" style="width: 30%;"></div>
</div>
<div class="progress">
  <div class="progress-inner green" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-inner blue" style="width: 90%;"></div>
</div>

</body>
</html>

○サンプルコード8：テキスト付きプログレスバー

このコードでは、プログレスバーにテキストを表示する方法を紹介しています。

この例では、プログレスバーの内部要素にテキストを追加し、進捗状況をパーセントで表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 30px;
    background-color: lightgray;
    position: relative;
  }

  .progress-inner {
    height: 100%;
    background-color: blue;
    position: relative;
  }

  .progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
</style>
</head>
<body>

<div class="progress">
  <div class="progress-inner" style="width: 70%;">
    <span class="progress-text">70%</span>
  </div>
</div>

</body>
</html>

○サンプルコード9：スクロールに連動するプログレスバー

このコードでは、スクロール位置に連動してプログレスバーが更新されるように実装しています。

この例では、JavaScriptを使ってスクロール位置を取得し、プログレスバーの幅を更新しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 5px;
    background-color: lightgray;
    position: fixed;
    top: 0;
  }

  .progress-inner {
    height: 100%;
    background-color: blue;
  }
</style>
<script>
  window.onscroll = function() {
    var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    var progress = (scrollPosition / scrollHeight) * 100;
    document.getElementById("progress-inner").style.width = progress + "%";
  };
</script>
</head>
<body>

<div class="progress">
  <div id="progress-inner" class="progress-inner" style="width: 0%;"></div>
</div>
<div style="height: 2000px;"></div>

</body>
</html>

○サンプルコード10：画像を使ったプログレスバー

このコードでは、画像を使ってプログレスバーを作成する方法を紹介しています。

この例では、CSSで背景画像を設定し、プログレスバーの内部要素の背景に表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .progress {
    width: 100%;
    height: 30px;
    background-color: lightgray;
  }

  .progress-inner {
    height: 100%;
    background-image: url('your-image-url');
    background-size: cover;
  }
</style>
</head>
<body>

<div class="progress">
  <div class="progress-inner" style="width: 50%;"></div>
</div>

</body>
</html>

●注意点と対処法

プログレスバーの実装においては、次のような注意点があります。

  1. レスポンシブデザインに対応させることが重要です。
    ウィンドウサイズが変更されたときに、プログレスバーが適切に表示されるようにCSSを設定してください。
  2. プログレスバーが重なったり、他の要素と干渉しないように、適切な位置やz-indexを設定してください。
  3. JavaScriptで動的にプログレスバーを操作する際、パフォーマンスの低下を防ぐために、イベントリスナーやタイマーを適切に設定してください。

●カスタマイズ方法

プログレスバーのデザインや挙動は、CSSやJavaScriptを使って様々にカスタマイズできます。

例えば、次の方法が考えられます。

  1. カラー：プログレスバーの背景色やバーの色を変更することができます。
    CSSの background-color プロパティを使って色を指定してください。
  2. サイズ：プログレスバーの幅や高さを変更することができます。
    CSSの width と height プロパティを使ってサイズを指定してください。
  3. ボーダー：プログレスバーの枠線を追加したり、角を丸くすることができます。
    CSSの border および border-radius プロパティを使って設定してください。
  4. アニメーション：プログレスバーの動きにアニメーションを追加することができます。
    CSSの transition プロパティや、JavaScriptを使って動的に変更することができます。
  5. インタラクション：ユーザーがプログレスバーを操作できるようにすることもできます。
    JavaScriptのイベントリスナーを使って、クリックやドラッグなどのイベントに対応させてください。

これらのカスタマイズ方法を組み合わせることで、独自のプログレスバーを作成することができます。

まとめ

この記事では、JavaScriptを使ったプログレスバーの実装方法やカスタマイズ方法を紹介しました。

いくつかのサンプルコードを用いて、シンプルなプログレスバーからアニメーション付きや画像を使ったものまで、様々なタイプのプログレスバーを作成する方法を解説しました。

注意点や対処法を考慮しながら、自分だけのオリジナルなプログレスバーを作成して、ウェブページをより魅力的にしましょう。