ブートストラップの進行状況バー


この章では、Bootstrap のプログレスバーについて説明します。このチュートリアルでは、ブートストラップを使用して、読み込み、リダイレクト、またはアクションの状態の進行状況バーを作成する方法を説明します。

ブートストラップのプログレスバーは、CSS3 トランジションとアニメーションを使用してこの効果を実現します。 Internet Explorer 9 以前および古いバージョンの Firefox はこの機能をサポートしておらず、Opera 12 はアニメーションをサポートしていません。

デフォルトのプログレスバー

基本的なプログレスバーを作成する手順は次のとおりです:

  • クラス .progress を使用して <div> を追加します。

  • 次に、上記の <div> 内に、クラス .progress-bar を含む空の <div> を追加します。

  • 幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="60%" は進行状況バーが 60% の位置にあることを意味します。

以下の例を見てみましょう:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行]ボタンをクリックしてください

交互の進行状況バー

Cre違うものを食べた進行状況のスタイル 手順は次のとおりです:

  • クラス .progress を使用して <div> を追加します。

  • 次に、上記の <div> 内に、クラス .progress-bar とクラス progress-bar-* を含む空の <div> を追加します。その中で、* は、成功、情報、警告、危険の可能性があります。

  • 幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="60%" は進行状況バーが 60% の位置にあることを意味します。

次のインスタンスを見てみましょう:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 交替的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成（危险）</span>
   </div>
</div>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

結果は次のようになります:

交替的进度条

縞模様の進行状況バー

縞模様の進行状況バーを作成する手順は次のとおりです:

  • クラス .progress および .progress-striped を使用して <div> を追加します。

  • 次に、上記の <div> 内に、クラス .progress-bar とクラス progress-bar-* を含む空の <div> を追加します。その中で、* は、成功、情報、警告、危険の可能性があります。

  • 幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="60%" は進行状況バーが 60% の位置にあることを意味します。

次のインスタンスを見てみましょう:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 条纹的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成（危险）</span>
   </div>
</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

結果は次のようになります:

条纹的进度条

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

アニメーションプログレスバーを作成する手順は次のとおりです:

  • クラス.progressと.progress-stripedを含む<div>を追加します。クラス.activeも追加します。

  • 次に、上記の <div> 内に、クラス .progress-bar を含む空の <div> を追加します。

  • 幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="60%" は進行状況バーが 60% の位置にあることを意味します。

こうすることで、ストライプに右から左への動きを感じさせます。

以下の例を見てみましょう:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 动画的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped active">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


动画的进度条

積み上げ進行状況バー

複数の進行状況バーを積み重ねることもできます。次の例に示すように、複数の進行状況バーを同じ .progress に配置してスタックを実現します。

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 堆叠的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成（信息）</span>
   </div>
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>

</body>
</html>

インスタンスの実行»

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

結果は次のようになります:

堆叠的进度条