Bootstrap4

Bootstrap4でプログレスバー（Progress）の作り方

2020年3月17日

Bootstrap4でプログレスバー（Progress）を作成する方法

Bootstrap4の機能であるProgress（プログレスバー）の使い方を紹介します。

スポンサーリンク

プログレスバー（Progress）の画面イメージ

プログレスバー（Progress）の画面イメージは次の通りです。

プログレスバーイメージ図

プログレスバー（Progress）のHTML

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Optional JavaScript -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <title>bootstrapサンプル</title>
  </head>
  <body>
    <div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  </body>
</html>

プログレスバー（Progress）のタグ解説

プログレスバー（Progress）はdiv.progress > div.progress-barと階層を作り、次の属性で進捗を表します。

属性説明
aria-valuenow現在の進捗
aria-valuemin進捗の最低値
aria-valuemax進捗の最大値

また、見た目は「style="width: 25%"」で幅を指定。

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

プログレスバー（Progress）の詳細設定

スポンサーリンク

プログレスバー（Progress）に進捗率を表示する

プログレスバーに進捗率を表示

プログレスバー（Progress）に進捗率を表示するには、div.progress-bar内に表示したい文字列を入力します。

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

プログレスバー（Progress）の高さを変える

プログレスバーの高さを変える

プログレスバー（Progress）の高さを変えるには、div.progressに「style="height: 30px;"」を追加し、お好みの高さに設定します。

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

プログレスバー（Progress）の色を変える

プログレスバーの色を変える

プログレスバー（Progress）の色を変えるには、div.progress-barに「bg-info」のようにお好みの色を指定します。

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

プログレスバーで指定できる主な色は次の通りです。

スタイル色
.bg-primary#007bff
.bg-secondary#6c757d
.bg-success#28a745
.bg-danger#dc3545
.bg-warning#ffc107
.bg-info#17a2b8
.bg-light#f8f9fa
.bg-dark#343a40
.bg-white#fff

プログレスバー（Progress）をストライプ模様にする

プログレスバーをストライプ模様にする

プログレスバー（Progress）をストライプ模様にするには、div.progress-barに「progress-bar-striped」と「progress-bar-animated」を追加します。

「progress-bar-striped」でストライプ模様になり、更に「progress-bar-animated」を追加することでストライプ模様が動き出します。

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

helpful