From 86a17fc99bba1ab54ff54e4454dd44ec0807fea5 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 14 Aug 2016 11:58:14 +0300
Subject: [PATCH] Add ComponentLoader

---
 src/components/ui/loader/ComponentLoader.jsx  | 29 ++++++++
 src/components/ui/loader/componentLoader.scss | 70 +++++++++++++++++++
 src/components/ui/loader/index.js             |  5 ++
 3 files changed, 104 insertions(+)
 create mode 100644 src/components/ui/loader/ComponentLoader.jsx
 create mode 100644 src/components/ui/loader/componentLoader.scss
 create mode 100644 src/components/ui/loader/index.js

diff --git a/src/components/ui/loader/ComponentLoader.jsx b/src/components/ui/loader/ComponentLoader.jsx
new file mode 100644
index 0000000..b7e259b
--- /dev/null
+++ b/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
+};
diff --git a/src/components/ui/loader/componentLoader.scss b/src/components/ui/loader/componentLoader.scss
new file mode 100644
index 0000000..aeb701b
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/components/ui/loader/index.js b/src/components/ui/loader/index.js
new file mode 100644
index 0000000..c1db8c6
--- /dev/null
+++ b/src/components/ui/loader/index.js
@@ -0,0 +1,5 @@
+import ComponentLoader from './ComponentLoader';
+
+export {
+    ComponentLoader
+};