Reset progress bar to zero without animation (in bootstrap)

Question

I have multiple actions to perform and I am using bootstrap progress bar to show the progress on each action. After the completion of each action the progress bar is set to zero using the below line of code $('.progress').attr('style', "width: 0%")

But, this animates reverse, for users it looks like application is undoing an action performed previously.

How do I reset the progress bar instantly without the reverse animation effect?

Answer 1

You can remove the transitions of progress-bar as described in this answer

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
$(".progress-bar").addClass("notransition");
$('.progress-bar').attr('style', "width: 0%");

and if you want you can enable transitions again by removing notransition class

$(".progress-bar").removeClass("notransition");