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 (
+
+
+ {new Array(5).fill(0).map((_, index) => (
+
+ ))}
+
+
+ );
+}
+
+
+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
+};