React.js Progress Bar

HTML

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

CSS

@import url("http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic");

/*********** DEFAULT BODY STYLING **********/
 body {
    font-family:"Noto Sans";
    font-size: 12px;
    line-height: 1.0;
    border-spacing: 0px;
}
a.feature-link {
    color: #337EC6;
    /* $blue_link */
    text-decoration: none;
}
/********** DEFAULT TABLE STYLING **********/
 table {
    font-size: 12px;
    line-height: 1.4;
    border-spacing: 0px;
}
tr {
    height: 32px;
}
td {
    padding: 4px;
    vertical-align: top;
    border-bottom: 1px solid #D6D6D6;
    /* $grey3 */
}
th {
    font-weight: normal;
    color: #000;
    /* black */
    border-bottom: 2px solid #D6D6D6;
    /* $grey3 */
    vertical-align: bottom;
    text-align: left;
    padding: 4px;
}

/***** COMMENT (Do NOT use this code as reference to production *****/
.container {
    width: 100px;
    float: left;
    height: 20px;
}
.bar {
    font-size: 12px;
    line-height: 1.0;
    width: 100px;
    background: #E6E6E6;
    /* $grey2 */
    position: absolute;
    float: left;
    height: 20px;
    border-radius: 2px;
}
.bar:hover {
    cursor: pointer;
}
.meter {
    float: left;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    text-decoration: none;
    position: absolute;
    height: 20px;
}
.percent {
    text-transform: uppercase;
    font-family:"ProximaNovaSemiBold", sans-serif;
    color: #444;
    /* $grey8 */
    font-size: .8em;
    /* 13px */
    text-align: center;
    height: 20px;
    float: left;
    position: absolute;
    width: 100px;
    padding: 4px 0px;
}
.notStarted {
    background: #E6E6E6;
    /* $grey2 */
}
.onTrack {
    background: #8DC63F;
    /* $lime */
}
.risk {
    background: #FAD200;
    /* $yellow */
}
.late {
    background: #F66349;
    /* $red_med */
}
.complete {
    background: #C0C0C0;
    /* $grey4 */
    width: 100%;
    border-radius: 2px;
}

JavaScript 1.7

/** @jsx React.DOM */

var ProgressBar = React.createClass({
    propTypes: {
        percentComplete: React.PropTypes.number.isRequired,
        status: React.PropTypes.string,
        statusClass: React.PropTypes.string
    },
    
    render: function() {
        var text = this.props.percentComplete + "%"
        if (this.props.status) {
            text += " / " + this.props.status;
        }
        var barStyle = {width:this.props.percentComplete+"%"};
        var meterClass = "meter " + (this.props.statusClass || "")
        return <div className="container">
            <div className="bar">
                <div style={barStyle} className={meterClass}></div>
                <div className="percent">{text}</div>
            </div>
        </div>;
    }
});

React.renderComponent(<ProgressBar percentComplete={3} statusClass="late" status="late" />, document.body);