likeopera-frontend/ProgressBar.js

import React from 'react';

export default class ProgressBar extends React.PureComponent
{
    state = { width: '' }

    render()
    {
        return <div className="progress-bar" ref="pbar" style={{ display: this.props.text ? '' : 'none' }}>
            <div className="pending" style={{ width: this.state.width }}>{this.props.text} ({this.props.progress||0}%)</div>
            <div className="clip" style={{ width: (this.props.progress||0)+'%', overflow: 'hidden' }}>
                <div className="done" ref="pdone" style={{ width: this.state.width }}>{this.props.text} ({this.props.progress||0}%)</div>
            </div>
        </div>
    }

    componentDidUpdate(prevProps, prevState)
    {
        if (!prevState.width)
        {
            setTimeout(this.onResize, 50);
        }
    }

    onResize = () =>
    {
        this.setState({ width: this.refs.pbar.offsetWidth });
    }

    componentDidMount()
    {
        window.addEventListener('resize', this.onResize);
        this.onResize();
    }

    componentWillUnmount()
    {
        window.removeEventListener('resize', this.onResize);
    }
}