ブートストラップ-プログレスバー

この章では、Bootstrapプログレスバーについて説明します。プログレスバーの目的は、アセットが読み込まれている、進行中であること、またはページ上の要素に関してアクションが発生していることを示すことです。

プログレスバーは、CSS3トランジションとアニメーションを使用して、いくつかの効果を実現します。これらの機能は、Internet Explorer9以前のバージョンのFirefoxではサポートされていません。Opera12はアニメーションをサポートしていません。

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

基本的なプログレスバーを作成するには-

次のクラスの<div>を追加します .progress。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";としましょう。プログレスバーが60％であったことを示します。

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

<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% Complete</span>
   </div>
</div>

代替プログレスバー

さまざまなスタイルのプログレスバーを作成するには-

次のクラスの<div>を追加します .progress。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar とクラス progress-bar-* ここで*は success, info, warning, danger。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";としましょう。プログレスバーが60％であったことを示します。

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

<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% Complete (Sucess)</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% Complete (info)</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%Complete (warning)</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% Complete (danger)</span>
   </div>
</div>

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

ストライプのプログレスバーを作成するには−

次のクラスの<div>を追加します .progress そして .progress-striped。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar とクラス progress-bar-* ここで*は success, info, warning, danger。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";としましょう。プログレスバーが60％であったことを示します。

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

<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% Complete (Sucess)</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% Complete (info)</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%Complete (warning)</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% Complete (danger)</span>
   </div>
</div>

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

アニメーションのプログレスバーを作成するには-

次のクラスの<div>を追加します .progress そして .progress-striped。クラスも追加.active に .progress-striped。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";としましょう。プログレスバーが60％であったことを示します。

これにより、ストライプが右から左にアニメーション化されます。

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

<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% Complete</span>
   </div>
</div>

スタックプログレスバー

複数のプログレスバーを積み重ねることもできます。複数のプログレスバーを同じ場所に配置します.progress 次の例に示すように、それらをスタックします-

<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% Complete</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% Complete (info)</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%Complete (warning)</span>
   </div>
   
</div>