Add Spinner component

Using one found on http://tobiasahlin.com/spinkit/ for now. @carljbowman please help

package.json

@@ -46,6 +46,7 @@
     "lodash.clone": "3.0.3",
     "lodash.defaultsdeep": "3.10.0",
     "lodash.omit": "3.1.0",
+    "lodash.range": "3.0.1",
     "minilog": "2.0.8",
     "node-sass": "3.3.3",
     "po2icu": "git://github.com/LLK/po2icu.git#develop",

src/components/spinner/spinner.jsx

@@ -0,0 +1,20 @@
+var range = require('lodash.range');
+var React = require('react');
+
+require('./spinner.scss');
+
+var Spinner = React.createClass({
+    // Adapted from http://tobiasahlin.com/spinkit/
+    type: 'Spinner',
+    render: function () {
+        return (
+            <div className="spinner">
+                {range(1,13).map(function (id) {
+                    return <div className={'circle' + id + ' circle'}></div>;
+                })}
+            </div>
+        );
+    }
+});
+
+module.exports = Spinner;

src/components/spinner/spinner.scss

@@ -0,0 +1,45 @@
+.spinner {
+    width: 20px;
+    height: 20px;
+    position: relative;
+
+    .circle {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        &:before {
+            content: '';
+            display: block;
+            margin: 0 auto;
+            width: 15%;
+            height: 15%;
+            background-color: #333;
+            border-radius: 100%;
+            -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: circleFadeDelay 1.2s infinite ease-in-out both;
+        }
+    }
+
+    @for $i from 1 through 12 {
+        $rotation: 30deg * ($i - 1);
+        $delay: -1.3s + $i * .1;
+        .circle#{$i} {
+            -webkit-transform: rotate($rotation);
+            -ms-transform: rotate($rotation);
+            transform: rotate($rotation);
+        }
+        .circle#{$i}:before {
+            -webkit-animation-delay: $delay;
+            animation-delay: $delay; 
+        }
+    }
+
+}
+
+@keyframes circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+}

src/views/components/components.jsx

@@ -6,6 +6,7 @@ var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var Input = require('../../components/forms/input.jsx');
+var Spinner = require('../../components/spinner/spinner.jsx');
 
 
 require('./components.scss');
@@ -37,6 +38,8 @@ var Components = React.createClass({
                 <Activity />
                 <h1>{'Nothing!!!'}</h1>
                 <Activity items={[]} />
+                <h1>This is a Spinner</h1>
+                <Spinner />
             </div>
         );
     }