轮播指标进度栏

Question

我想用进度条填充自举轮播指示器，该进度条与幻灯片更改间隔（大约4秒）同步。 这是到目前为止我提出的最好的解决方案。问题是：单击时没有激活的指示器持续填充，并且当需要更改幻灯片时，激活的指示器不会从0重新开始。 有什么想法吗？

<ol class="carousel-indicators"> <li data-target="#carouselOfCards" data-slide-to="0" class="active"> <div class="progress" style="height:3px;width:30px"> <div class="progress-bar" role="progressbar" style="height:3px;background:purple" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> </li> <li data-target="#carouselOfCards" data-slide-to="1" > <div class="progress" style="height:3px;width:30px"> <div class="progress-bar" role="progressbar" style="height:3px;background:purple" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> </li> <li data-target="#carouselOfCards" data-slide-to="2"> <div class="progress" style="height:3px;width:30px"> <div class="progress-bar" role="progressbar" style="height:3px;background:purple" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> </li> </ol>

var count = 0;
setInterval(function(){
  if(count <= 90){
    count++;
    $(".carousel-indicators li.active .progress .progress-bar").animate({width:count},70);
  }
  else{
    count = 0;
    $(".carousel-indicators li.progress .progress-bar").each(function(){
      $(this).css({"width":"0"});
    });
  }
},40);