Add ComponentLoader

src/components/ui/loader/ComponentLoader.jsx

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+import classNames from 'classnames';
+
+import { skins, SKIN_DARK } from 'components/ui';
+
+import styles from './componentLoader.scss';
+
+export default function ComponentLoader(props) {
+    const {skin} = props;
+    return (
+        <div className={classNames(styles.componentLoader, styles[`${skin}ComponentLoader`])}>
+            <div className={styles.spins}>
+                {new Array(5).fill(0).map((_, index) => (
+                    <div className={classNames(styles.spin, styles[`spin${index}`])} key={index} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+
+ComponentLoader.propTypes = {
+    skin: PropTypes.oneOf(skins),
+};
+
+ComponentLoader.defaultProps = {
+    skin: SKIN_DARK
+};

src/components/ui/loader/componentLoader.scss

@@ -0,0 +1,70 @@
+@import '~components/ui/colors.scss';
+
+.componentLoader {
+    width: 100%;
+    text-align: center;
+}
+
+.spins {
+    height: 40px;
+}
+
+.spin {
+    height: 20px;
+    width: 20px;
+    // background: $green;
+    display: inline-block;
+    margin: 10px 2px;
+    opacity: 0;
+    animation: loaderAnimation 1s infinite;
+}
+
+.spin1 {
+    animation-delay: 0s;
+}
+
+.spin2 {
+    animation-delay: 0.1s;
+}
+
+.spin3 {
+    animation-delay: 0.2s;
+}
+
+.spin4 {
+    animation-delay: 0.3s;
+}
+
+.spin5 {
+    animation-delay: 0.4s;
+}
+
+/**
+ * Skins
+ */
+.lightComponentLoader {
+    .spin {
+        background: #fff;
+    }
+}
+
+.darkComponentLoader {
+    .spin {
+        background: #444;
+    }
+}
+
+@keyframes loaderAnimation {
+    0% {
+        opacity:0;
+    }
+
+    50% {
+        opacity:1;
+        transform: scaleY(2)
+    }
+
+    100% {
+        opacity:0;
+    }
+}

src/components/ui/loader/index.js

@@ -0,0 +1,5 @@
+import ComponentLoader from './ComponentLoader';
+
+export {
+    ComponentLoader
+};