Created custom Loader component

website/src/ui/Loader.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import Radium from 'radium'
 import PropTypes from 'prop-types'
+import { colorInfo } from 'ui/style'
+import anime from 'animejs'
 
 class Loader extends React.Component {
   static propTypes = {
@@ -15,26 +17,38 @@ class Loader extends React.Component {
     margin: '2px'
   }
 
-  style(i) {
-    return {
-      backgroundColor: `${this.props.color}`,
-      width: `${this.props.size}px`,
-      height: `${this.props.size}px`,
-      margin: `${this.props.margin}`,
-      borderRadius: '100%',
-      display: 'inline-block',
-      // 0% {transform: scale(1); opacity: 1} 45% {transform: scale(0.1); opacity: 0.7} 80% {transform: scale(1); opacity: 1} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08)
-      animation: ``,
-      animationFillMode: 'both'
-    }
-  }
-
   render() {
+    const size = 20
+    const spacing = 5
+
+    const addAnimation = (elem, i) => {
+      anime({
+        targets: elem,
+        scale: [
+          { value: 0.2, duration: 800, easing: 'easeOutSine', delay: 200 * i },
+          { value: 1.0, duration: 800, easing: 'easeOutSine' },
+          { value: 1.0, duration: 200 * (2 - i) }
+        ],
+        loop: true
+      })
+    }
+
     return (
-      <div>
-        <div className={this.style(1)} />
-        <div className={this.style(2)} />
-        <div className={this.style(3)} />
+      <div style={{ height: size }}>
+        {
+          [0, 1, 2].map((i) => (
+            <span key={i} ref={(elem) => addAnimation(elem, i)}
+              style={{
+                display: 'inline-block',
+                marginLeft: i > 0 ? spacing : 0,
+                width: size,
+                height: size,
+                background: colorInfo.textInverse,
+                borderSize: 0,
+                borderRadius: '100%'
+              }} />
+          ))
+        }
       </div>
     )
   }