@Oversec

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

Надо сделать прогресс бар с таймером. Сделал просто на js с анимацией но возникла проблема при использовании React-routes (анимация включалась повторно и всё дёргалось). Может уже кто сталкивался с такой задачей? Хотел сделать вой React компонент, но возник вопрос, как лучше сделать анимацию уменьшения width элемента по таймеру? При css анимации проблема заключается в том, что человек может зайти в любой момент, поэтому анимация должна начинаться не со 100%, вот пример реализации на jquery
prnt.sc/euc5qn
  • Вопрос задан
  • 1094 просмотра
Решения вопроса 1
fnnzzz
@fnnzzz
front-end dev
описываете в 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%
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы