0
133
VistasHow do I animate react-bootstrap progress bar from 0 to N on page load?
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.
1 Respuestas
Responde la pregunta0
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.