0

Bootstrap 4 Progress-Bars with Animation and Numbers

var delay = 500;
$(".progress-bar").each(function(i){
    $(this).delay( delay*i ).animate( { width: $(this).attr('aria-valuenow') + '%' }, delay );

    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: delay,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now)+'%');
        }
    });
});
<div class="row">
  <div class="col-md-6">
    <h3 class="bars">Scrollbars</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25</div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75</div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
    </div>
  </div>
</div>
.row {
  padding: 4em 3em;
}

.textbox {
  height: 700px;
}

.progress {
  margin-bottom: 10px;
}

.progress-bar {
  width: 0;
}
RUN
  • This function convert in javascript - kamaljaipur7741 Oct 01`20 at 06:52
  • This function not working in bootstrap 5? - kamaljaipur7741 Oct 01`20 at 06:53
add comment
Suggest a different solution or add another example