user3088077 user3088077 - 1 year ago 154
Javascript Question

Animating Bootstrap progress bar width with jQuery

I want to animate a progress bar's width from 0% to 70% over 2.5 seconds. However, the code below immediately changes the width to 70% after a 2.5 second delay. What am I missing?

width: "70%"
}, 2500);


Answer Source

The problem is in default Bootstrap transition effect, which animates any update of the width property.

If you switch it off with supressing the corresponding style, it will work fine, e.g.:

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;


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