refactor(macSpinner): Updated to make sure size is rendered correctly.

Reduced spinner css size and calculate width and height with js.

src/css/spinner.styl

@@ -1,65 +1,11 @@
 .mac-spinner
   display  inline-block
-  height   16px
   position relative
-  width    16px
 
   &.block
     display block
     margin  0 auto
 
-  .bar
-    animation     fade 1s linear infinite
-    background    #2f3035
-    border-radius 2em
-    box-shadow    0 0 3px rgba(0,0,0,0.2)
-    height        32%
-    left          44.5%
-    opacity       0
-    position      absolute
-    top           37%
-    width         13%
-
-  .bar:nth-child(1)
-    animation-delay 0s
-    transform       rotate(0deg) translate(0, -130%)
-
-  .bar:nth-child(2)
-    animation-delay -0.9s
-    transform       rotate(36deg) translate(0, -130%)
-
-  .bar:nth-child(3)
-    animation-delay -0.8s
-    transform       rotate(72deg) translate(0, -130%)
-
-  .bar:nth-child(4)
-    animation-delay -0.7s
-    transform       rotate(108deg) translate(0, -130%)
-
-  .bar:nth-child(5)
-    animation-delay -0.6s
-    transform       rotate(144deg) translate(0, -130%)
-
-  .bar:nth-child(6)
-    animation-delay -0.5s
-    transform       rotate(180deg) translate(0, -130%)
-
-  .bar:nth-child(7)
-    animation-delay -0.4s
-    transform       rotate(216deg) translate(0, -130%)
-
-  .bar:nth-child(8)
-    animation-delay -0.3s
-    transform       rotate(252deg) translate(0, -130%)
-
-  .bar:nth-child(9)
-    animation-delay -0.2s
-    transform       rotate(288deg) translate(0, -130%)
-
-  .bar:nth-child(10)
-    animation-delay -0.1s
-    transform       rotate(324deg) translate(0, -130%)
-
 @keyframes fade
   0%
     opacity 1

src/directives/spinner.coffee

@@ -10,31 +10,68 @@ A directive for generating spinner
 @param {String}  mac-spinner-color Color of all the bars (default #2f3035)
 ###
 
-angular.module("Mac").directive "macSpinner", ->
+angular.module("Mac").directive "macSpinner", ["util", (util) ->
   restrict: "E"
   replace:  true
   template: """<div class="mac-spinner"></div>"""
 
-  compile: (element, attributes) ->
+  compile: (element, attrs) ->
+    prefixes = ["webkit", "Moz", "ms", "O"]
+    vendor = (el, name) ->
+      name = util.capitalize name
+      return prefix+name for prefix in prefixes when el.style[prefix+name]?
+      return name
+
     for i in [0..9]
-      element.append """<div class="bar"></div>"""
+      delay  = i * 0.1 - 1 + (not i)
+      degree = i * 36
+      styl   = {}
+      bar    = angular.element """<div class="bar"></div>"""
 
-    ($scope, element, attributes) ->
-      attributes.$observe "macSpinnerSize", (value) ->
-        if value? and value
+      styl[vendor(bar[0], "animation")] = "fade 1s linear infinite #{delay}s"
+      styl[vendor(bar[0], "transform")] = "rotate(#{degree}deg) translate(0, 130%)"
+      bar.css styl
+
+      element.append bar
+
+    ($scope, element, attrs) ->
+      defaults =
+        size:   16
+        zIndex: "inherit"
+        color:  "#2f3035"
+
+      bars = angular.element element[0].getElementsByClassName("bar")
 
-          if not isNaN(+value) and angular.isNumber +value
-            value = "#{value}px"
+      setSpinnerSize = (size) ->
+        bars.css
+          height:       size * 0.32 + "px"
+          left:         size * 0.445 + "px"
+          top:          size * 0.37 + "px"
+          width:        size * 0.13 + "px"
+          borderRadius: size * 0.32 * 2 + "px"
+          position:     "absolute"
 
-          element
-            .css("height", value)
-            .css("width", value)
+        if not isNaN(+size) and angular.isNumber +size
+          size = "#{size}px"
 
-      attributes.$observe "macSpinnerZIndex", (value) ->
+        element.css
+          height: size
+          width:  size
+
+      if attrs.macSpinnerSize?
+        attrs.$observe "macSpinnerSize", (value) ->
+          setSpinnerSize value if value? and value
+      else
+        setSpinnerSize defaults.size
+
+      attrs.$observe "macSpinnerZIndex", (value) ->
         if value? and value
           element.css "z-index", value
 
-      attributes.$observe "macSpinnerColor", (value) ->
-        if value? and value
-          bars = element[0].getElementsByClassName "bar"
-          angular.element(bars).css "background", value
+      if attrs.macSpinnerColor?
+        attrs.$observe "macSpinnerColor", (value) ->
+          bars.css "background", value if value? and value
+      else
+        bars.css "background", defaults.color
+
+]