Turn off Bootstrap's CSS3 transitions on progress bars

Question

Anyone know a way to disable Bootstrap's CSS3 transitions on the progress bars? I'm updating them via javascript/jquery and don't want them doing the animating.

This looked promising but couldn't get it to work: Turn Off CSS3 Animation With jQuery?

Info on progress bars: http://twitter.github.com/bootstrap/components.html#progress

Might be stupid, but you can't just edit CSS and remove references to *-transition? — Guillaume Poussel, Mar 08 '12 at 17:49

score 45 · Accepted Answer · answered Mar 08 '12 at 18:31

45

You can turn off the transition effects by setting the css transition rule to none, like so:

.progress .bar {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

answered Mar 08 '12 at 18:31

Andres I Perez

75,075
21
157
138

That did it! Should have been looking for the transition property instead. Thanks! – user1006426 Mar 08 '12 at 20:05
6

Change the CSS selector to just .progress-bar in order to disable the transition effects in Bootstrap 3.0 – Alex Dec 06 '13 at 10:34
1

I added a new class like `no-transition` with this style marked as `!important` so this way I can selectively turn it off for specific progress bars. – Zoltán Tamási Apr 22 '16 at 13:53

score 2 · Answer 2 · answered Mar 09 '12 at 06:57

2

Since the animation is comes from the active class you can just use

$('.progress').removeClass('active');

or

$('.progress').toggleClass('active');

answered Mar 09 '12 at 06:57

vicentedealencar

913
1
10
20

7

This question was more about transition than animation – rpechayr Jun 11 '13 at 14:53

score 0 · Answer 3 · answered Dec 27 '16 at 17:05

0

I solved the problem with javascript

      $('#proc').hide();
      $("#proc").width(0 + "%");
      $('#proc').show();

For me its working fine. Not flashing and just doing its job. You can also do it with pure css I think.

answered Dec 27 '16 at 17:05

Johan Hoeksma

3,534
5
28
40

Sylhare · Answer 4 · 2017-11-07T17:18:27.733

You can also do it stopping with $(".progress-bar").stop() the animation and then start it back again.

I wanted to have the bar back to 0 and start again to move to 100%. So here how it goes:

$(".progress-bar").stop();      //Stopping the current animation at the current width
$(".progress-bar").animate({width: "0%"}, 100);       //Going back to 0% smoothly in 100ms
$(".progress-bar").animate({width: "100%"}, 1000);    //Restarting the process bar to 100%

I hope it will help some.

Turn off Bootstrap's CSS3 transitions on progress bars

4 Answers4