Bootstrap4

Bootstrap4でプログレスバー(Progress)の作り方

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>

\  いいね!フォローをお願いします /

© 2020 ITを分かりやすく解説