Loading Animation

src/components/UI/loader/Loader.css

@@ -33,9 +33,7 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  -webkit-animation: loader 0.6s linear;
   animation: loader 0.6s linear;
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #767676 transparent transparent;
@@ -93,3 +91,25 @@
 .disabled {
   display: none;
 }
+
+/*Animations*/
+.animateItem{
+  position: absolute;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.enter {
+  opacity: 0.01;
+}
+.enter.enterActive {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+.leave {
+  opacity: 1;
+}
+.leave.leaveActive {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}

src/components/UI/loader/Loader.js

@@ -1,21 +1,68 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styles from './Loader.css';
 
-export default function Loader({ active, style, className = '', children }) {
-  // Class names
-  let classNames = styles.loader;
-  if (active) {
-    classNames += ` ${styles.active}`;
-  }
-  if (className.length > 0) {
-    classNames += ` ${className}`;
+export default class Loader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentItem: 0,
+    };
+    this.setAnimation = this.setAnimation.bind(this);
+    this.renderChild = this.renderChild.bind(this);
   }
 
-  // Render child text
-  let child;
-  if (children) {
-    child = <div className={styles.text}>{children}</div>;
+  componengWillUnmount() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
   }
 
-  return <div className={classNames} style={style}>{child}</div>;
+  setAnimation() {
+    if (this.interval) return;
+    const { children } = this.props;
+
+    this.interval = setInterval(() => {
+
+      const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
+      this.setState({ currentItem: nextItem });
+    }, 5000);
+  }
+
+  renderChild() {
+    const { children } = this.props;
+    const { currentItem } = this.state;
+    if (!children) {
+      return null;
+    } else if (typeof children == 'string') {
+      return <div className={styles.text}>{children}</div>;
+    } else if (Array.isArray(children)) {
+      this.setAnimation();
+      return <div className={styles.text}>
+        <ReactCSSTransitionGroup
+            transitionName={styles}
+            transitionEnterTimeout={500}
+            transitionLeaveTimeout={500}
+        >
+          <div key={currentItem} className={styles.animateItem}>{children[currentItem]}</div>
+        </ReactCSSTransitionGroup>
+      </div>;
+    }
+  }
+
+  render() {
+    const { active, style, className = '' } = this.props;
+
+    // Class names
+    let classNames = styles.loader;
+    if (active) {
+      classNames += ` ${styles.active}`;
+    }
+    if (className.length > 0) {
+      classNames += ` ${className}`;
+    }
+
+    return <div className={classNames} style={style}>{this.renderChild()}</div>;
+
+  }
 }