const React = require('react');
const { bool, number } = React.PropTypes;

/**
 * Displays a progress bar (YouTube-like) at the top of container
 */
const ProgressBar = React.createClass({
    propTypes: {
        show:  bool,
        // 0 < percent < 1
        percent: number
    },

    getDefaultProps: function () {
        return {
            show: false,
            percent: 0.3
        };
    },

    getInitialState: function () {
        return {
            percent: 0
        };
    },

    getBarStyle: function () {
        const { show, percent } = this.props;

        return {
            width: percent * 100 + '%',
            display: show && percent > 0 ? 'block': 'none'
        };
    },

    getShadowStyle: function () {
        const { show, percent } = this.props;

        return {
            display: show && percent > 0 ? 'block': 'none'
        };
    },

    render: function () {
        return <div className="progress-bar">
            <div className="bar" style={this.getBarStyle()}>
                <div className="progress-bar-shadow"
                     style={this.getShadowStyle()}>
                </div>
            </div>
        </div>;
    }
});

module.exports = ProgressBar;

@@ -138,16 +138,105 @@
 ntainer%0A
+ * Based on https://github.com/lonelyclick/react-loading-bar/blob/master/src/Loading.jsx%0A
  */%0Acons
@@ -311,60 +311,8 @@
 bool
-,%0A        // 0 %3C percent %3C 1%0A        percent: number
 %0A   
@@ -395,34 +395,8 @@
 alse
-,%0A            percent: 0.3
 %0A   
@@ -479,113 +479,1585 @@
     
-percent: 0%0A        %7D;%0A    %7D,%0A%0A    getBarStyle: function () %7B%0A        const %7B show, percent %7D = this.props
+size: 0,%0A            disappearDelayHide: false, // when dispappear, first transition then display none%0A            percent: 0,%0A            appearDelayWidth: 0 // when appear, first display block then transition width%0A        %7D;%0A    %7D,%0A%0A    componentWillReceiveProps: function (nextProps) %7B%0A        const %7B show %7D = nextProps;%0A%0A        if (show) %7B%0A            this.show();%0A        %7D else %7B%0A            this.hide();%0A        %7D%0A    %7D,%0A%0A    shouldComponentUpdate: function (nextProps, nextState) %7B%0A        return true; // !shallowEqual(nextState, this.state)%0A    %7D,%0A%0A    show: function () %7B%0A        let %7B size, percent %7D = this.state;%0A%0A        const appearDelayWidth = size === 0;%0A        percent = calculatePercent(percent);%0A%0A        this.setState(%7B%0A            size: ++size,%0A            appearDelayWidth,%0A            percent%0A        %7D);%0A%0A        if (appearDelayWidth) %7B%0A            setTimeout(() =%3E %7B%0A                this.setState(%7B%0A                    appearDelayWidth: false%0A                %7D);%0A            %7D);%0A        %7D%0A    %7D,%0A%0A    hide: function () %7B%0A        let %7B size %7D = this.state;%0A%0A        if (--size %3C 0) %7B%0A            this.setState(%7B size: 0 %7D);%0A            return;%0A        %7D%0A%0A        this.setState(%7B%0A            size: 0,%0A            disappearDelayHide: true,%0A            percent: 1%0A        %7D);%0A%0A        setTimeout(() =%3E %7B%0A            this.setState(%7B%0A                disappearDelayHide: false,%0A                percent: 0%0A            %7D);%0A        %7D, 500);%0A    %7D,%0A%0A    getBarStyle: function () %7B%0A        const %7B disappearDelayHide, appearDelayWidth, percent %7D = this.state
 ;%0A%0A 
@@ -2090,16 +2090,39 @@
   width:
+ appearDelayWidth ? 0 :
  percent
@@ -2148,39 +2148,53 @@
        display: 
-show &&
+disappearDelayHide %7C%7C
  percent %3E 0 ? '
@@ -2280,22 +2280,16 @@
 st %7B
- show,
  percent
  %7D =
@@ -2276,32 +2276,52 @@
  const %7B percent
+, disappearDelayHide
  %7D = this.props;
@@ -2318,13 +2318,13 @@
 his.
-props
+state
 ;%0A%0A 
@@ -2364,15 +2364,29 @@
 ay: 
-show &&
+disappearDelayHide %7C%7C
  per
@@ -2738,16 +2738,226 @@
  %7D%0A%7D);%0A%0A
+function calculatePercent(percent) %7B%0A    percent = percent %7C%7C 0;%0A%0A    // How much of remaining bar we advance%0A    let progress = 0.1 + Math.random() * 0.2;%0A%0A    return percent +  progress * (1 - percent);%0A%7D%0A%0A%0A%0A
 module.e

Add proper ProgressBar animation