   calculateRatio: (value) ->
     (value - @props.min) / (@props.max - @props.min)
 
-  transformProgress: (ratio) ->
-    WebkitTransform: "scaleX(#{ratio})"
-    MsTransform:     "scaleX(#{ratio})"
-    transform:       "scaleX(#{ratio})"
-
   # -- Render
   render: ->
-    className      = 'indeterminate' if @props.indeterminate
-    primaryRatio   = @calculateRatio(@props.value)
-    secondaryRatio = @calculateRatio(@props.buffer)
+    className   = @props.className
+    className   += ' indeterminate' if @props.indeterminate
+    valueStyle  = transformProgress(@calculateRatio(@props.value))
+    bufferStyle = transformProgress(@calculateRatio(@props.buffer))
 
     <div data-component-progressbar
          className={className}

  # -- Properties
  propTypes:
    buffer        : React.PropTypes.number
    max           : React.PropTypes.number
    min           : React.PropTypes.number
    value         : React.PropTypes.number
    indeterminate : React.PropTypes.bool

  getDefaultProps: ->
    buffer        : 0
    indeterminate : false
    max           : 100
    min           : 0

         aria-valuenow={@props.value}
         aria-valuemin={@props.min}
         aria-valuemax={@props.max}>
      <span data-component-progressbar-buffer style={bufferStyle}></span>
      <span data-component-progressbar-value  style={valueStyle}></span>
    </div>

# TODO Refactor to a module to add vendor prefixes to a property
transformProgress = (ratio) ->
  WebkitTransform: "scaleX(#{ratio})"
  MsTransform:     "scaleX(#{ratio})"
  transform:       "scaleX(#{ratio})"
