LoadingRipple component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostout-ui-kit",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "ghostout-ui-kit React component",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/LoadingRipple/LoadingRipple.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import '../../../css/components/LoadingRipple/LoadingRipple.css'
+
+export default () => {
+  return (
+    <div className="overlay-box">
+      <div className="overlay-content">
+        <div className="lds-ripple"><div></div><div></div></div>
+      </div>
+    </div>
+  )
+}

src/components/LoadingRipple/LoadingRipple.scss

@@ -0,0 +1,80 @@
+@keyframes lds-ripple {
+  0% {
+    top: 96px;
+    left: 96px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 18px;
+    left: 18px;
+    width: 156px;
+    height: 156px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes lds-ripple {
+  0% {
+    top: 96px;
+    left: 96px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 18px;
+    left: 18px;
+    width: 156px;
+    height: 156px;
+    opacity: 0;
+  }
+}
+
+.overlay-box {
+  background-color: rgba(0,0,0,0.3);
+  text-align:center;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+
+.overlay-content {
+  margin: auto;
+}
+
+.lds-ripple {
+  width: 200px;
+  height: 200px;
+  position: relative;
+}
+
+.lds-ripple div {
+  box-sizing: content-box;
+  position: absolute;
+  border-width: 4px;
+  border-style: solid;
+  opacity: 1;
+  border-radius: 50%;
+  -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(1) {
+  border-color: #2A9D8F;
+}
+.lds-ripple div:nth-child(2) {
+  border-color: #277C72;
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.lds-ripple {
+  width: 200px !important;
+  height: 200px !important;
+  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+}

src/components/LoadingRipple/LoadingRipple.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { expect } from 'chai'
+
+import LoadingRipple from './LoadingRipple';
+
+describe('<LoadingRipple />', () => {
+  it('has the overlay-box class', () => {
+    const loadingRippleComponent = shallow((<LoadingRipple />));
+
+    expect(loadingRippleComponent.hasClass('overlay-box')).to.be.true;
+  });
+});

src/components/LoadingRipple/index.js

@@ -0,0 +1 @@
+export { default } from './LoadingRipple'

src/index.js

@@ -16,4 +16,5 @@ export SelectContainer from './components/SelectContainer'
 export Section from './components/Section'
 export Tag from './components/Tag'
 export List from './components/List'
-export ListItem from './components/ListItem'
+export ListItem from './components/ListItem'
+export LoadingRipple from './components/LoadingRipple'