Reset progress bar to zero without animation (in bootstrap)

Question

I have several actions to perform, and I use the bootstrap progress bar to show the progress of each action. After completing each action, the progress bar is set to zero using the following line of code $ ('progress'). attr ('style', 'width: 0% ")

But, it animates the opposite, for users it looks like the application cancels the action performed earlier.

How to reset a progress bar without a reverse animation effect?

Answer 1

You can remove progress bar transitions 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 the nonransition class

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