From 297fb101e75b5d29e411451d075a0b96c1b94f77 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sat, 5 Jun 2021 17:25:01 +0800
Subject: Use a simpler app level loading animation

---
 src/components/Loading.module.css | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

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

diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css
index 559fcd2..a59b7dd 100644
--- a/src/components/Loading.module.css
+++ b/src/components/Loading.module.css
@@ -6,23 +6,23 @@
   align-items: center;
 }
 
-.pulse {
-  --color1: #dddddd;
-  --size: 40px;
-  width: var(--size);
-  height: var(--size);
-  margin: 10px;
-  background-color: var(--color1);
-  border-radius: 100%;
-  animation: pulseScaleOut 1s infinite ease-in-out;
+.spinner {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  animation: rotate 1s steps(12, end) infinite;
+  background: transparent
+    url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")
+    no-repeat;
+  background-size: 100%;
 }
 
-@keyframes pulseScaleOut {
+@keyframes rotate {
   0% {
-    transform: scale(0);
+    transform: rotate3d(0, 0, 1, 0deg);
   }
   100% {
-    transform: scale(1);
-    opacity: 0;
+    transform: rotate3d(0, 0, 1, 360deg);
   }
 }
-- 
cgit v1.3.1