Convert Loader to styled component

Author: adityagarg06

client/modules/App/components/loader.jsx

@@ -1,11 +1,55 @@
 import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { prop, remSize } from '../../../theme';
+
+const skBounce = keyframes`
+  0%, 100% {
+    transform: scale(0.0);
+  }
+  50% {
+    transform: scale(1.0);
+  }
+`;
+const Container = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${prop('backgroundColor')};
+  }
+`;
+const LoaderWrapper = styled.div`
+  &&& {
+    width: ${remSize(80)};
+    height: ${remSize(80)};
+    position: relative;
+  }
+`;
+const LoaderCircle = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    border-radius: 80%;
+    background-color: ${prop('logoColor')};
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: ${skBounce} 2s infinite ease-in-out;
+    &:nth-child(2) {
+      animation-delay: -1s;
+    }
+  }
+`;
 
 const Loader = () => (
-  <div className="loader-container">
-    <div className="loader">
-      <div className="loader__circle1" />
-      <div className="loader__circle2" />
-    </div>
-  </div>
+  <Container>
+    <LoaderWrapper>
+      <LoaderCircle />
+      <LoaderCircle />
+    </LoaderWrapper>
+  </Container>
 );
 export default Loader;

client/styles/components/_loader.scss

@@ -75,6 +75,7 @@ const baseThemes = {
     inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
     accentColor: colors.p5jsPink,
+    logoColor: colors.p5jsPink,
 
     Button: {
       primary: {
@@ -162,6 +163,7 @@ const baseThemes = {
     inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
     accentColor: colors.p5jsPink,
+    logoColor: colors.p5jsPink,
 
     Button: {
       primary: {
@@ -248,6 +250,7 @@ export default {
   ...baseThemes,
   [Theme.contrast]: extend(baseThemes[Theme.dark], {
     inactiveTextColor: grays.light,
+    logoColor: colors.yellow,
 
     Button: {
       primary: {