From 7f75345c03c21336cff68370eede0879c6bdf6ab Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Tue, 30 Oct 2018 23:37:42 +0800
Subject: refactor(chart): lazy load Chart.js with suspense

- chore: add ico favicon
- chore: lint
- chore: add react-hooks lint rules
---
 src/components/Loading.module.scss | 61 +++++++++++++-------------------------
 1 file changed, 21 insertions(+), 40 deletions(-)

(limited to 'src/components/Loading.module.scss')

diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss
index 7166140..05f8f3f 100644
--- a/src/components/Loading.module.scss
+++ b/src/components/Loading.module.scss
@@ -1,50 +1,31 @@
-$color1: #2a477a;
-$color2: #dddddd;
+// $color1: #2a477a;
+$color1: #dddddd;
 
-@keyframes moveRight {
-  0% {
-    transform: translate(-50px);
-  }
-
-  100% {
-    transform: translate(10px);
-  }
-}
-
-@keyframes moveLeft {
-  0% {
-    transform: translate(50px);
-  }
-
-  100% {
-    transform: translate(-10px);
-  }
-}
+$size: 40px;
 
 .loading {
-  position: relative;
   width: 100%;
-  height: 300px;
-  margin: 0 auto;
-  height: 30vh;
-}
-
-.circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.left {
+.pulse {
+  width: $size;
+  height: $size;
+  margin: 10px;
   background-color: $color1;
-  left: 50%;
-  animation: moveRight 1s ease-in-out 0s infinite alternate;
+  border-radius: 100%;
+  animation: pulseScaleOut 1s infinite ease-in-out;
 }
 
-.right {
-  background-color: $color2;
-  right: 50%;
-  animation: moveLeft 1s ease-in-out 0s infinite alternate;
+@keyframes pulseScaleOut {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }
-- 
cgit v1.3.1