CODEWITHSUNDEEP
jqueryreactjsbootstrap-4
frustrated-dev
frustrated-dev

Reputation: 451

How to animate react-bootstrap progress bar using jquery?

I need your help making this progress bar animate starts from 0 to now value I have tried jquery code for an hour but the animation didn't behave the way it should be. Need your help guys. Thank you in advance.

import $ from 'jquery';
import ProgressBar from 'react-bootstrap/ProgressBar';

function ProgressBar() {
var delay = 1500;
$(".progress-bar").each(function(){
    $(this).animate( { width: $(this).attr('aria-valuenow') + '%' }, delay );
});
return (
<ProgressBar className="ProgressBar" now={95} />
<ProgressBar className="ProgressBar" now={55} />
<ProgressBar className="ProgressBar" now={50} />
);
}

export default ProgressBar;

Here's the output: Out

Upvotes: 1

Views: 182

Answers (1)

Pushpendra Yadav
Pushpendra Yadav

Reputation: 128

You can make use of animated props. I think that would suffice. Attaching a codesandbox for clarity.

https://codesandbox.io/s/upbeat-diffie-ghizg?file=/src/App.js

Upvotes: 2

Related Questions