   # -- Properties
   propTypes:
     buffer        : React.PropTypes.number
+    className     : React.PropTypes.string
+    indeterminate : React.PropTypes.bool
     max           : React.PropTypes.number
     min           : React.PropTypes.number
     value         : React.PropTypes.number
-    indeterminate : React.PropTypes.bool
 
   getDefaultProps: ->
     buffer        : 0
+    className     : ""
     indeterminate : false
     max           : 100
     min           : 0

  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)

    <div data-component-progressbar
         className={className}

         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})"
