Question

142

Animating Bootstrap progress bar width with jQuery

rated 0 times [ 144] [ 2] / answers: 1 / hits: 63718 / 10 Years ago, fri, may 9, 2014, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 10 Years ago kendellc · Accepted 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/