Bootstrap选项卡进度条

Question

我希望能够在下面显示的选项卡中有一个进度条，所以当它在1时整行都是灰色但是当选择2时，1-2会是蓝色的吗？这是我到目前为止所拥有的

我的HTML -

    <div class="navbar wizard">
           <div class="col-md-4"></div>
              <div class="navbar-inner">

                    <ul class="nav nav-pills wizard">
                       <li class="active"><a href="#step1" data-toggle="tab" data-step="1">1</a></li>
                       <li><a href="#step2" data-toggle="tab" data-step="2">2</a></li>
                       <li><a href="#step3" data-toggle="tab" data-step="3">3</a></li>
                    </ul>
              </div>
           </div>`

我的CSS -

.nav-pills > li > a {
  border-radius: 100%;
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
}

.navbar.wizard .nav > li > a {
  color: #ebebeb;
  border: 2px solid #ebebeb;
  background-color: transparent;
}


.navbar.wizard .nav > li.active > a {
  color: #31b0d5;
  border: 2px solid #31b0d5;
  background-color: transparent;
}

我的JQuery -

$('.next').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');
  return false;

})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

  //update progress
  var step = $(e.target).data('step');
  var percent = (parseInt(step) / 3) * 100;

  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of 3");

  //e.relatedTarget // previous tab

})

$('.first').click(function(){

  $('#myWizard a:first').tab('show')

})  

What I would like to achieve