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?

Remove animation property before applying `width` – Rayon Apr 02 '16 at 18:29 — Rayon, Apr 02 '16 at 18:29

score 12 · Accepted Answer · edited May 23 '17 at 11:46

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");

Reset progress bar to zero without animation (in bootstrap)

1 Answers1