Bootstrap-progress-bars

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

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

'_進行状況バーは、CSS3トランジションとアニメーションを使用して、効果の一部を実現します。 これらの機能は、Internet Explorer 9以前またはそれ以前のバージョンのFirefoxではサポートされていません。 Opera 12はアニメーションをサポートしていません。_

デフォルトの進行状況バー

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

• .progress のクラスで<div>を追加します。
• 次に、上記の<div>内に、*。progress-bar *のクラスを持つ空の<div>を追加します。
• 幅をパーセンテージで表したスタイル属性を追加します。 たとえば、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>

代替プログレスバー

さまざまなスタイルで進行状況バーを作成するには-

• .progress のクラスで<div>を追加します。
• 次に、上記の<div>内に、。progress-bar *およびclass * progress-bar-*のクラスを持つ空の<div>を追加します。ここで、は *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>

ストライプの進行状況バー

ストライプの進行状況バーを作成するには-

• .progress および .progress-striped のクラスを持つ<div>を追加します。
• 次に、上記の<div>内に、。progress-bar *およびclass * progress-bar-*のクラスを持つ空の<div>を追加します。ここで、は *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>

アニメーションの進行状況バー

アニメーションの進行状況バーを作成するには-

• .progress および .progress-striped のクラスを持つ<div>を追加します。 また、クラス .active を .progress-striped に追加します。
• 次に、上記の<div>内に、*。progress-bar *のクラスを持つ空の<div>を追加します。
• 幅をパーセンテージで表したスタイル属性を追加します。 たとえば、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>