Add linear progress bar

components/constants.styl

@@ -33,6 +33,7 @@ INPUT_HEIGHT                = (2 * SPACE)
 BUTTON_HEIGHT               = (2.5 * SPACE)
 BUTTON_CIRCLE_HEIGHT        = (2.75 * SPACE)
 LOADING_HEIGHT              = (1.5 * UNIT)
+PROGRESS_BAR_HEIGHT         = (SPACE / 4)
 
 // -- Shadows
 ZDEPTH_SHADOW_1             = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)

components/index.coffee

@@ -14,5 +14,6 @@ module.exports =
   Loading       : require "./loading"
   Navigation    : require "./navigation"
   Ripple        : require "./ripple"
+  ProgressBar   : require "./progress_bar"
   # -- Tools
   Router        : require "./router"

components/progress_bar/index.cjsx

@@ -0,0 +1,47 @@
+###
+@todo Add a circular progress variant
+###
+
+require './style'
+
+module.exports = React.createClass
+
+  # -- 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
+    value         : 0
+
+  # -- Helper methods
+  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}
+         role="progressbar"
+         aria-valuenow={@props.value}
+         aria-valuemin={@props.min}
+         aria-valuemax={@props.max}>
+      <span data-component-progressbar-buffer style={@transformProgress(secondaryRatio)}></span>
+      <span data-component-progressbar-value  style={@transformProgress(primaryRatio)}></span>
+    </div>

components/progress_bar/style.styl

@@ -0,0 +1,40 @@
+@import '../constants.styl'
+
+// -- Main styles
+[data-component-progressbar]
+  display                       : inline-block
+  position                      : relative
+  height                        : PROGRESS_BAR_HEIGHT
+  width                         : 100%
+  background                    : darken(BACKGROUND, 7.5%)
+  overflow                      : hidden
+
+  [data-component-progressbar-value], [data-component-progressbar-buffer]
+    position                    : absolute
+    bottom                      : 0
+    left                        : 0
+    right                       : 0
+    top                         : 0
+    transform                     scaleX(0)
+    transform-origin              left center
+    transition-duration           ANIMATION_DURATION
+    transition-timing-function    ANIMATION_EASE
+
+  [data-component-progressbar-value]
+    background-color            : SECONDARY
+
+  [data-component-progressbar-buffer]
+    background-color            : lighten(SECONDARY, 70%)
+
+  &.indeterminate > [data-component-progressbar-value]
+    transform-origin              center center
+    animation                     indeterminate-bar 1s linear infinite
+
+// -- Animation for the indeterminate progress bar
+@keyframes indeterminate-bar
+  0%
+    transform: translate(-50%) scaleX(0)
+  50%
+    transform: translate(0%) scaleX(0.3)
+  100%
+    transform: translate(50%) scaleX(0)