Why progress bar always shows 100%?

Question

I'm working with office 365 progress bar . I got data for it (percents) from websocket. Now I have next code:

export default class NotificationBar extends Component {

    constructor(props) {
        super(props);
        this._async = new Async(this);
    }

    render(){
        let { process } = this.props;// this object I get from flux store, it refreshes when web socket  updates

        return (
                    <ProgressIndicator
                        percentComplete={ this._getProgress() } />
        )
    };

    _getProgress = () => {
        let { process } = this.props;//here this.props.process.percent updates
        return process.percent;
    };
}

After page load progress bar becomes 100% and doesnt change, though I get percents from method. I tried to experiment and put in component's render:

• percentComplete={ 0 } -progressbar is empty
• percentComplete={ any number > 0 } progressbar displays 100%

What can be the reason of such behavior? Where I made the mistake?

Answer 1

That's because percentComplete must be a number between 0 and 1. If you use more than 1 it will count as 100%.

In programming this behavior is widely used, as 50% is just 50/100 = 0.5 , for example.