feat(ui): add Spinner component

app/components/UI/Spinner.js

@@ -0,0 +1,35 @@
+import styled, { keyframes } from 'styled-components'
+import { Card } from 'rebass'
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+/**
+ * @render react
+ * @name Spinner
+ * @example
+ * <Spinner />
+ */
+const Spinner = styled(Card)`
+  border: 1px solid rgba(235, 184, 100, 0.1);
+  border-left-color: rgba(235, 184, 100, 0.6);
+  display: inline-block;
+  animation: ${rotate360} 1s linear infinite;
+`
+
+Spinner.displayName = 'Spinner'
+Spinner.defaultProps = {
+  borderRadius: 999,
+  width: '1em',
+  css: {
+    height: '1em'
+  }
+}
+
+export default Spinner

stories/components/spinner.stories.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import Spinner from 'components/UI/Spinner'
+
+storiesOf('Components.Spinners', module).add('circle', () => <Spinner />)

test/unit/components/UI/Spinner.spec.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Spinner from 'components/UI/Spinner'
+import renderer from 'react-test-renderer'
+
+describe('component.UI.Spinner', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Spinner />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

test/unit/components/UI/__snapshots__/Spinner.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Spinner should render correctly 1`] = `
+.c0 {
+  width: 1em;
+  height: 1em;
+  border-radius: 999px;
+  border: 1px solid rgba(235,184,100,0.1);
+  border-left-color: rgba(235,184,100,0.6);
+  display: inline-block;
+  -webkit-animation: iVXCSc 1s linear infinite;
+  animation: iVXCSc 1s linear infinite;
+}
+
+<div
+  className="c0"
+  width="1em"
+/>
+`;