How do I animate react-bootstrap progress bar from 0 to N on page load?-CodePudding

I am using the react-bootstrap ui library for the progress bar. I want it to animate the progress bar from 0 to 70 on page load.

How do I achieve it?

Here is the code

Component.js

<ProgressBar
        animated
        now={70}
        className="progress-bar"
      />

Component.style

.progress-bar {
  width: 400px;
}

Expected OutPut: It should animate from 0 to 70 on page load.

CodePudding user response：

The animate property doesn't animate the progress, but animates the stripes on the progress bar.

From the docs:

Animate's the stripes from right to left

What you need is a timer that updates the now property. Probably something like this:

const MyComp = () => {
 const [progressNow, setProgressNow] = useState(0)

 const updateProgressNowHandler = setInterval(() => {
  if (progressNow >= 70 ){
   setProgressNow(70)
   clearInterval(updateProgressNowHandler)
  }
  setProgressNow(s => s 1)
 }, 50)

 return 
  <ProgressBar
        animated
        now={progressNow}
        className="progress-bar"
      />
}

This is by no means production ready.

You need to make sure that you clear the interval when the component unmounts.

If there is a chance that the component will be re-rendered (which most likely will happen) you need to keep track of the progress already made and start with the counter from the last value.