Determine correct origin of <Ripple/>

components/button.cjsx

@@ -2,9 +2,9 @@
 @todo
 ###
 
-Style     = require './style/button'
-FontIcon  = require './font_icon'
-Ripple    = require './ripple'
+Style    = require './style/button'
+FontIcon = require "./font_icon"
+Ripple   = require "./ripple"
 
 module.exports = React.createClass
 
@@ -15,10 +15,12 @@ module.exports = React.createClass
     icon        : React.PropTypes.string
     style       : React.PropTypes.string
     disabled    : React.PropTypes.bool
+    loading     : React.PropTypes.bool
 
   getDefaultProps: ->
     type        : "square"
     disabled    : false
+    loading     : false
 
   getInitialState: ->
     ripple      : undefined
@@ -30,9 +32,10 @@ module.exports = React.createClass
   # -- Events
   onClick: (event) ->
     event.preventDefault()
+    client = event.target.getBoundingClientRect?()
     @setState ripple:
-                left  : event.pageX - event.target.offsetLeft
-                top   : event.pageY - event.target.offsetTop
+                left  : event.pageX - client?.left
+                top   : event.pageY - client?.top
     @props.onClick? event, @
 
   # -- Render
@@ -40,9 +43,9 @@ module.exports = React.createClass
     <button data-component-button={@props.type}
             onClick={@onClick}
             className={@props.style}
-            disabled={@props.disabled}
+            disabled={@props.disabled or @props.loading}
             data-flex="horizontal center">
       { <FontIcon value={@props.icon} /> if @props.icon }
       { <abbr>{@props.caption}</abbr> if @props.caption }
-      <Ripple origin={@state.ripple} />
+      <Ripple origin={@state.ripple} loading={@props.loading} />
     </button>

components/ripple.cjsx

@@ -2,13 +2,17 @@
 @todo
 ###
 
-Style     = require './style/ripple'
+Style = require './style/ripple'
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
     origin    : React.PropTypes.object
+    loading   : React.PropTypes.bool
+
+  getDefaultProps: ->
+    loading   : false
 
   getInitialState: ->
     className : undefined
@@ -24,6 +28,8 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
+    className = @state.className
+    className += " loading" if @props.loading
     <div  data-component-ripple
-          className={@state.className}
+          className={className}
           style={left: @props.origin?.left, top: @props.origin?.top} />

components/style/ripple.styl

@@ -6,11 +6,16 @@
   transform                     translateX(-50%) translateY(-50%)
   border-radius               : 50%
   // -- Classes
-  &.active
+  &.active, &.loading
     animation-name              ripple
-    animation-iteration-count   1
     animation-timing-function   ANIMATION_EASE
     animation-duration          (2 * ANIMATION_DURATION)
+  &.active
+    animation-iteration-count   1
+  &.loading
+    left                      : 50%
+    top                       : 50%
+    animation-iteration-count   infinite
 
 @keyframes ripple
   0%