react template

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.ProgressBar {
    width: 400px;
    border: solid 1px red;
}

.ProgressBarStatus {
    height: 50px;
    background: red;
    transition: all 1s;
}

JavaScript 1.7

/**
* @jsx React.DOM
*/


var ProgressBar = React.createClass({
  render: function() {
    var progress = Math.max(0, Math.min(100, this.props.progress));

    var statusStyle = {
      width: progress + '%'
      //width: Math.ceil(400 * progress/100)
    };

    return (
      <div className="ProgressBar">
        <div style={statusStyle} className="ProgressBarStatus" />
      </div>
    );
  },
});

var Example = React.createClass({
  getInitialState: function() {
    return {progress: 50};
  },

  render: function() {
    return (
      <div>
        <p>
          Set progress to
          <input type="button" value={10} onClick={this._setProgress} />
          <input type="button" value={50} onClick={this._setProgress} />
          <input type="button" value={100} onClick={this._setProgress} />
        </p>
        <p>{this.state.progress}</p>
        <ProgressBar progress={this.state.progress} />
      </div>
    );
  },

  _setProgress: function(e) {
    this.setState({progress : parseInt(e.target.value)});
  }
});

React.renderComponent(<Example/>, document.body);