Animating Bootstrap progress bar width with jQuery

Question

I want to animate a progress bar\'s width from 0% to 70% over 2.5 seconds. However, the code below immediately changes the width to 70% after a 2.5 second delay. What am I m

Answer 1

You can fix it by adding:

.progress .progress-bar {
  transition: unset;
}

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) + '%');
    }
  });
});

.progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 0;
}

.bg-purple {
  background-color: #825CD6 !important;
}

.progress .progress-bar {
  transition: unset;
}

  
Bootstrap 4 Progress Bars
  

    
70
  
  

    
50
  
  

    
90