Pramodh Pramodh - 1 year ago 203
Javascript Question

Reset progress bar to zero without animation (in bootstrap)

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 Source

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').attr('style', "width: 0%");

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download