Bootstrap プログレスバー

この記事では、Bootstrap フレームワークのプログレスバーコンポーネントの使い方について解説します。基本的なプログレスバーの作成方法に加えて、さまざまなクラスや属性を使用して、プログレスバーの外観や動作をカスタマイズする方法を学びます。

プログレスバーの種類

基本的なプログレスバー: 最も基本的な HTML 構造を使用して、シンプルなプログレスバーを作成する方法を説明します。
ラベル付きプログレスバー: プログレスバーにテキストラベルを追加して、進捗状況をパーセンテージやその他の情報で表示する方法を説明します。
色付きプログレスバー: Bootstrap の定義済みコンテキストクラスを使用して、プログレスバーの色を変更する方法を説明します。
ストライププログレスバー: .progress-bar-striped クラスを使用して、ストライプ効果のあるプログレスバーを作成する方法を説明します。
アニメーションプログレスバー: .progress-bar-animated クラスを使用して、アニメーション効果のあるストライププログレスバーを作成する方法を説明します。
複数プログレスバー: 同じプログレスバーコンテナ内に複数のプログレスバーを作成して、複数のタスクの進捗状況を表示する方法を説明します。

補助クラスと属性

高さ: height CSS プロパティを使用して、プログレスバーの高さを調整します。
背景色: background color utilities を使用して、プログレスバーの背景色を変更します。
カスタムラベル: カスタムの HTML 要素と CSS クラスを使用して、より複雑なプログレスバーラベルを作成する方法を説明します。
アクセシビリティ: ARIA 属性を使用するなどして、プログレスバーコンポーネントのセマンティクスとアクセシビリティを確保します。

コード例

基本的なプログレスバー


<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ラベル付きプログレスバー


<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>

色付きプログレスバー


<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ストライププログレスバー


<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

アニメーションプログレスバー


<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

複数プログレスバー


<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

参考資料

https://getbootstrap.jp/docs/4.3/components/progress/

よくある質問

Q1: プログレスバーの幅を動的に変更するにはどうすればよいですか？

A1: JavaScript を使用して、プログレスバー要素の style.width プロパティを更新します。たとえば、進捗状況が 75% の場合は、element.style.width = '75%' のように設定します。

Q2: プログレスバーにカスタムアニメーションを追加するにはどうすればよいですか？

A2: CSS アニメーションまたは JavaScript アニメーションライブラリを使用して、プログレスバーの幅やその他のプロパティをアニメーション化します。

Q3: プログレスバーのアクセシビリティを向上させるにはどうすればよいですか？

A3: ARIA 属性を使用して、スクリーンリーダーなどの支援技術がプログレスバーの状態を正しく解釈できるようにします。たとえば、aria-valuenow、aria-valuemin、aria-valuemax 属性を使用して、現在の値、最小値、最大値を指定します。