@bigfishtv/cockpit/src/components/ProgressBarPredictive.js

import React, { Component } from 'react'

export default class ProgressBarPredictive extends Component {
	static defaultProps = {
		estimatedTime: 5000,
	}

	constructor(props) {
		super()
		this.startTime = new Date().getTime()
		this.mounted = true
		this.state = {
			progress: 0,
		}
	}

	componentDidMount() {
		this.checkTime()
		this.animationInterval = setInterval(() => this.checkTime(), 1000 / 10)
	}

	componentWillUnmount() {
		this.mounted = false
		if (this.animationInterval) clearInterval(this.animationInterval)
	}

	checkTime() {
		const currentTime = new Date().getTime()
		const elapsedTime = currentTime - this.startTime
		const progress = (elapsedTime / this.props.estimatedTime) * 100
		if (!this.mounted || progress >= 100) clearInterval(this.animationInterval)
		if (this.mounted) this.setState({ progress })
	}

	render() {
		return <progress value={this.state.progress} max={100} style={{ marginLeft: 15, marginRight: 15 }} />
	}
}