Bootstrapプログレスバーの長さをアニメーションで制御する

処理進捗やLoading状態を表現するプログレスバーですが、今回はBootstrapのプログレスバーの長さをjQueryでアニメーション制御します。

こちらがBootstrapのデフォルトのプログレスバーです。

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

このバーの長さを制御するためには、単純にwidthの値をJavaScriptで変更するだけで良いです。
BootstrapでデフォルトのTransitionプロパティが指定されているので、CSS3が有効なブラウザ上でwidthの指定だけでアニメーション効果が得られます。

$('.progress-bar').css('width', '100%');

実際に下の「click」ボタンでこのjQueryコードを実行できます。

また、Bootstrapのクラス「progress-bar-striped active」を割り当てることで、バーがGIFアニメーションのような効果が得られるので、動いている感が増します。

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

さらにtransitionの時間を調整することでアニメーションのスピードを制御することもできます。

transition-duration: 5s;

これらを実装したサンプルです