プログレスバーを作る

ローディングなんかに良さそうですね。ストライプとストライプアニメーションが良い感じです。

<div class="progress">
  <div class="progress-bar" style="width: 20%;"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 30%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
</div>
 
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 40%"></div>
</div>
 
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
</div>
<div class="progress progress-striped active">
  <div class="progress-bar" style="width: 45%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"></div>
  <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>

100%までアニメーションさせてみる

jQueryでボタンを押した時に100%になるようにしてるだけなのですが、アニメーションしてくれるようです。

数値が決め打ちなら良いかもしれません。

<script type="text/javascript">
      $(function () {
        $(document).on('click','#start',function(){ 
          $("#pgss").css({'width':'100%'});
        });
        $(document).on('click','#back',function(){ 
          $("#pgss").css({'width':'0%'});
        });
      })
      </script>
 
      <button type="button" class="btn btn-success btn-sm" id="start">ボタンを押すとスタート</button>
      <button type="button" class="btn btn-success btn-sm" id="back">戻す</button>
      <div class="code" style="width: 50%; padding-top: 15px">
        <div class="progress">
          <div class="progress-bar progress-bar-info" id="pgss"></div>
        </div>
      </div>

自前で100%までアニメーションさせてみる

90%で止めてます。

これはBootstrapのアニメーションと被るようで、カクカクした動きになるようです。ローディング系でアニメーションさせるなら自作した方が良さそうですね。

<script type="text/javascript">
$(function () {
  var count = 0;
  $(document).on('click','#start2',function(){ 
     progress(count);
  });
  $(document).on('click','#back2',function(){ 
    $("#pgss2").css({'width':'0%'});
  });
 
  function progress(count){
    setTimeout(function(){ 
      $("#pgss2").css({'width':count+'%'});
      count++;
      if(count == 90) return;
      progress(count);
    },100);
  }
})
</script>
<button type="button" class="btn btn-success btn-sm" id="start2">ボタンを押すとスタート</button>
<button type="button" class="btn btn-success btn-sm" id="back2">戻す</button>
<div class="code" style="width: 50%; padding-top: 15px">
  <div class="progress">
    <div class="progress-bar progress-bar-info" id="pgss2"></div>
  </div>
</div>