Как сделать прогресс бар с таймером?

Question

[Oversec]

Надо сделать прогресс бар с таймером. Сделал просто на js с анимацией но возникла проблема при использовании React-routes (анимация включалась повторно и всё дёргалось). Может уже кто сталкивался с такой задачей? Хотел сделать вой React компонент, но возник вопрос, как лучше сделать анимацию уменьшения width элемента по таймеру? При css анимации проблема заключается в том, что человек может зайти в любой момент, поэтому анимация должна начинаться не со 100%, вот пример реализации на jquery
prnt.sc/euc5qn

Answer 1

[Vlad Feninets]

описываете в CSS ваш прогресс-бар и в вашем компоненте через inline-style меняете width по каким-то условиям, ну например как-то так:

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>
	)
}

каждую секунду progress-bar будет увеличиваться на 10%

Comments

[Oversec]

Немного не так, у меня вышло что таймер просто увеличился на 10% и всё, я смог поправить это с помощью рекурсии.

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>
  )
}

[Oversec]

Но спасибо большое, что подсказали способ, всё не отвыкну мыслить в стиле jQuery

[Vlad Feninets]

Oversec: это был просто пример на коленке :)
пожалуйста, да - голову ломать придется некоторое время