Add loader component

frontend/src/main/web/src/components/Loader/index.jsx

@@ -0,0 +1,119 @@
+import React, { PropTypes } from 'react'
+import { merge } from 'lodash'
+import {
+  Base,
+  Icon
+} from '../'
+
+const classes = {
+  base: {
+    ai: 'Ai(c)',
+    d: 'D(if)',
+    jc: 'Jc(sb)'
+  },
+  'n1': {
+    w: 'W(ms1)',
+    h: 'H(ms1)'
+  },
+  '0': {
+    w: 'W(ms2)',
+    h: 'H(ms2)'
+  },
+  '1': {
+    w: 'W(ms3)',
+    h: 'H(ms3)'
+  },
+  '2': {
+    w: 'W(ms4)',
+    h: 'H(ms4)'
+  },
+  '3': {
+    w: 'W(ms5)',
+    h: 'H(ms5)'
+  },
+  '4': {
+    w: 'W(ms6)',
+    h: 'H(ms6)'
+  },
+  '5': {
+    w: 'W(ms7)',
+    h: 'H(ms7)'
+  },
+  '6': {
+    w: 'W(ms8)',
+    h: 'H(ms8)'
+  },
+  '7': {
+    w: 'W(ms9)',
+    h: 'H(ms9)'
+  },
+  '8': {
+    w: 'W(ms10)',
+    h: 'H(ms10)'
+  },
+  '9': {
+    w: 'W(ms11)',
+    h: 'H(ms11)'
+  },
+  '10': {
+    w: 'W(ms12)',
+    h: 'H(ms12)'
+  }
+}
+
+const dotClasses = {
+  base: {
+    animdur: 'Animdur(0.9s)',
+    animic: 'Animic(i)',
+    animtf: 'Animtf(eob)',
+    animn: 'Animn(anibd)',
+    h: 'H(27.8%)',
+    w: 'W(27.8%)'
+  },
+  second: {
+    animdel: 'Animdel(0.15s)'
+  },
+  third: {
+    animdel: 'Animdel(0.3s)'
+  }
+}
+
+const Loader = ({
+  size,
+  theme,
+  ...props
+}) => {
+  const themed = merge({}, classes, theme)
+  const themedState = merge({},
+    themed.base,
+    themed[size]
+  )
+  return (
+    <Base
+      componentName='Loader'
+      theme={themedState}
+      {...props}>
+      <Icon name='dot' atomic={dotClasses.base} />
+      <Icon name='dot'
+        atomic={merge({}, dotClasses.base, dotClasses.second)}
+      />
+      <Icon name='dot'
+        atomic={merge({}, dotClasses.base, dotClasses.third)}
+      />
+    </Base>
+  )
+}
+
+Loader.propTypes = {
+  /**
+   * The size of each loader, based on modular scale.
+   */
+  size: PropTypes.string,
+  theme: PropTypes.object
+}
+
+Loader.defaultProps = {
+  size: '0'
+}
+
+export default Loader

frontend/src/main/web/src/components/Loader/readme.md

@@ -0,0 +1,9 @@
+Basic loader that always displays.
+
+## Default
+
+    <Loader />
+
+## Size
+
+    <Loader size='4' />

frontend/src/main/web/src/components/index.js

@@ -8,6 +8,7 @@ export Heading from './Heading'
 export Icons from './Icons'
 export Icon from './Icon'
 export Link from './Link'
+export Loader from './Loader'
 export Nav from './Nav'
 export NavItem from './NavItem'
 export NavIcon from './NavIcon'

frontend/src/main/web/src/index.js

@@ -14,6 +14,7 @@ import Root from './containers/Root'
 import Configs from './constants/Configs'
 import './styles/base.css'
 import './styles/atomic.css'
+import './styles/animations.css'
 import './styles/extras.css'
 
 WebFont.load({

frontend/src/main/web/src/styles/animations.css

@@ -0,0 +1,12 @@
+@keyframes bouncedelay {
+  0%,
+  90%,
+  100% {
+    transform: scale(0, 0);
+    opacity: .1;
+  }
+  40% {
+    transform: scale(1.1, 1.1);
+    opacity: 1;
+  }
+}

frontend/src/main/web/styleguide.config.js

@@ -8,6 +8,7 @@ module.exports = {
   updateWebpackConfig: function (webpackConfig, env) {
     webpackConfig.entry.push(path.join(__dirname, 'src/styles/base.css'))
     webpackConfig.entry.push(path.join(__dirname, 'src/styles/atomic.css'))
+    webpackConfig.entry.push(path.join(__dirname, 'src/styles/animations.css'))
     webpackConfig.entry.push(path.join(__dirname, 'src/styles/extras.css'))
     webpackConfig.entry.push(path.join(__dirname, 'src/styles/styleguide.css'))
     webpackConfig.module.loaders =