user3088077 user3088077 - 2 months ago 23
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?

$(".progress-bar").animate({
width: "70%"
}, 2500);


JSFiddle: http://jsfiddle.net/WEYKL/

Answer

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;
}

DEMO: http://jsfiddle.net/WEYKL/1/

Comments