Add preloader animation and removed react-preloaders (#63)

* Added preloader animation and removed Sugar Component

* Removed react-preloader from package.json

Author: dipeshkaphle

package.json

@@ -161,7 +161,6 @@
     "react-monaco-editor": "^0.22.0",
     "react-paginate": "^6.2.1",
     "react-player": "^1.15.2",
-    "react-preloaders": "^3.0.3",
     "react-redux": "^5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "^5.1.2",
@@ -176,6 +175,7 @@
     "redux-saga": "^0.16.2",
     "socket.io-client": "^2.2.0",
     "sockjs-client": "^1.4.0",
+    "styled-components": "^5.2.1",
     "zlib": "^1.0.5"
   }
 }

src/app/index.tsx

@@ -11,15 +11,13 @@ import { initializeRendererAssets } from 'code-character-renderer-20';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
 // @ts-ignore
-import { Sugar } from 'react-preloaders';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 initializeRendererAssets();
 
 /* tslint:disable-next-line:variable-name */
 export const App = hot(module)(() => (
   <HashRouter>
-    <Sugar background="#484848" color="white" />
     <Switch>
       <Route exact path={Routes.ROOT} component={Dashboard} />
       <Route exact path={Routes.LOGIN} component={Login} />

src/assets/index.html

@@ -9,9 +9,140 @@
       href="https://fonts.googleapis.com/css?family=Bebas+Neue|Lato&display=swap"
       rel="stylesheet"
     />
-    <title>Code Character</title>
+    <style>
+      #preloader-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 100000;
+        background-color: #fff;
+        transition: opacity 1s;
+      }
+      .container {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .item {
+        width: 100px;
+        height: 100px;
+        position: absolute;
+      }
+
+      .item-1 {
+        background-color: #fa5667;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        animation: item-1_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-2 {
+        background-color: #7a45e5;
+        top: 0;
+        right: 0;
+        animation: item-2_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-3 {
+        background-color: #1b91f7;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        animation: item-3_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      .item-4 {
+        background-color: #fac24c;
+        bottom: 0;
+        left: 0;
+        animation: item-4_move 3s cubic-bezier(0.6, 0.01, 0.4, 1) infinite;
+      }
+
+      @keyframes item-1_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(0, 100px);
+        }
+        50% {
+          transform: translate(100px, 100px);
+        }
+        75% {
+          transform: translate(100px, 0);
+        }
+      }
+
+      @keyframes item-2_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(-100px, 0);
+        }
+        50% {
+          transform: translate(-100px, 100px);
+        }
+        75% {
+          transform: translate(0, 100px);
+        }
+      }
+
+      @keyframes item-3_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(0, -100px);
+        }
+        50% {
+          transform: translate(-100px, -100px);
+        }
+        75% {
+          transform: translate(-100px, 0);
+        }
+      }
+
+      @keyframes item-4_move {
+        0%,
+        100% {
+          transform: translate(0, 0);
+        }
+        25% {
+          transform: translate(100px, 0);
+        }
+        50% {
+          transform: translate(100px, -100px);
+        }
+        75% {
+          transform: translate(0, -100px);
+        }
+      }
+    </style>
+    <title>code character</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div id="preloader-container">
+        <div class="container">
+          <div class="item item-1"></div>
+          <div class="item item-2"></div>
+          <div class="item item-3"></div>
+          <div class="item item-4"></div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>