モダンJavaScript入門: 動的なプログレスバーの制作

1. はじめに

本記事では、モダンなJavaScriptを用いて動的なプログレスバーの制作方法をご紹介します。

2. プログレスバーのHTML

まずは、プログレスバーの基本的なHTML構造を作ります。以下のようにprogress-barというクラスを持つdiv要素を作成し、その中にprogress-bar-fillというクラスを持つdiv要素を配置します。

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

3. プログレスバーのスタイル設定

次に、CSSを用いてプログレスバーのスタイルを設定します。progress-barクラスには背景色を設定し、progress-bar-fillクラスには実際のプログレスバーの色と初期幅を設定します。

.progress-bar {
  width: 100%;
  background-color: #f3f3f3;
}

.progress-bar-fill {
  height: 20px;
  background-color: #6699ff;
  width: 0%;
}

4. JavaScriptでのプログレスバー制御

最後に、JavaScriptを用いてプログレスバーの制御を行います。以下のコードでは、1秒ごとにプログレスバーの幅を10%ずつ増やしています。

const progressBarFill = document.querySelector(".progress-bar-fill");
let width = 0;

setInterval(() => {
  width += 10;
  progressBarFill.style.width = width + '%';
}, 1000);

5. CODEPENで確認

上記のコードを組み合わせた結果をこちらのCODEPENで確認できます。

6. まとめ

以上、モダンなJavaScriptを用いた動的なプログレスバーの制作方法について解説しました。これを基に、さまざまな用途に応じたプログレスバーを作成してみてください。

AIko Code Symphony