How to make a progress bar with a timer?

Need to make a progress bar with a timer. I put it on js with animation but there is a problem when using React-routes (animation included again and leg twitching). Who can already faced such problem? I wanted to make howl React component, but the question arose how best to do the animations reduce the width of the element on a timer? When css animations the problem is that people can enter at any time, so the animation should not begin with 100%, here's an example implementation with jquery
prnt.sc/euc5qn
June 27th 19 at 14:52
1 answer
June 27th 19 at 14:54
Solution
describe in your CSS progress bar in your component using inline style changing the width on some conditions well, for example something like this:

constructor() {
super()

 this.state = {
 progressState: 0
}
}

componentDidMount() {
 setTimeout(() => {
this.increaseProgress(10)
 }, 1000) 
}

increaseProgress(value) {
 this.setState({ progressState: this.state.progressState + value })
}

render() {
 return (
 <div classname="progress-loader" style="{{" width: `${this.state.progressstate}%` }}>Text</div>
)
}


every second progress bar will increase by 10%
Not quite I got that timer just increased by 10% and all I was able to fix it using recursion.

constructor() {
super()

 this.state = {
 progressState: 0
}
}

tickProgress() {
 if(progressState !== 100)
 setTimeout(() => {
this.increaseProgress(10);
this.tickProgress();
 }, 1000) 
}

componentDidMount() {
this.tickProgress
}

increaseProgress(value) {
 this.setState({ progressState: this.state.progressState + value });
}

render() {
 return (
 <div classname="progress-loader" style="{{" width: `${this.state.progressstate}%` }}>Text</div>
)
}
- modesta_Medhurst21 commented on June 27th 19 at 14:57
But thank you so much for suggested method, it is not unaccustomed to think in the style of jQuery - modesta_Medhurst21 commented on June 27th 19 at 15:00
: it was just an example on the knee :)
please, Yes, to break the head will have some time - Jonathon84 commented on June 27th 19 at 15:03

Find more questions by tags React