From 5f1f962643e6ccc3c0dfd6a60203d318d8769c4b Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Mon, 6 Nov 2023 23:54:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E6=9B=B4=E6=8D=A2?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5loading=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 115 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 80 insertions(+), 35 deletions(-)
diff --git a/index.html b/index.html
index 9677e1b..3dcc439 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,16 @@
   <body>
     <div id="app" class="app">
       <!--加载动画-->
-      <div class="cm-spinner"></div>
+      <div class="mesh-loader">
+        <div class="set-one">
+          <div class="circle"></div>
+          <div class="circle"></div>
+        </div>
+        <div class="set-two">
+          <div class="circle"></div>
+          <div class="circle"></div>
+        </div>
+      </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
     <script>
@@ -32,62 +41,98 @@
         justify-content: center;
         width: 100%;
         height: 100%;
+      }
+
+      .mesh-loader {
+        width: 100%;
+        height: 100%;
         overflow: hidden;
       }
 
-      .cm-spinner {
-        position: relative;
-        width: 150px;
-        height: 150px;
-        border: 3px solid transparent;
-        border-top: 4px solid #f15e41;
-        border-radius: 50%;
-        animation: spin 4s linear infinite;
-        animation: spin 4s linear infinite;
-      }
-
-      .cm-spinner::before,
-      .cm-spinner::after {
+      .mesh-loader .circle {
         position: absolute;
-        inset: 6px;
-        content: "";
-        border: 4px solid transparent;
+        width: 25px;
+        height: 25px;
+        margin: -12.5px;
+        background: #03a9f4;
         border-radius: 50%;
+        animation: mesh 3s ease-in-out infinite;
+        animation: mesh 3s ease-in-out infinite -1.5s;
       }
 
-      .cm-spinner::before {
-        border-top-color: #bad375;
-        animation: 3s spin linear infinite;
-        animation: 3s spin linear infinite;
+      .mesh-loader > div .circle:last-child {
+        animation-delay: 0s;
+        animation-delay: 0s;
       }
 
-      .cm-spinner::after {
-        border-top-color: #26a9e0;
-        animation: spin 1.5s linear infinite;
-        animation: spin 1.5s linear infinite;
+      .mesh-loader > div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
       }
 
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-          transform: rotate(0deg);
+      .mesh-loader > div:last-child {
+        transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+
+      @keyframes mesh {
+        0% {
+          transform: rotate(0);
+          transform: rotate(0);
+          transform-origin: 50% -100%;
+          transform-origin: 50% -100%;
         }
 
-        to {
+        50% {
           transform: rotate(360deg);
           transform: rotate(360deg);
+          transform-origin: 50% -100%;
+          transform-origin: 50% -100%;
+        }
+
+        50.00001% {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+          transform-origin: 50% 200%;
+          transform-origin: 50% 200%;
+        }
+
+        100% {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+          transform-origin: 50% 200%;
+          transform-origin: 50% 200%;
         }
       }
 
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-          transform: rotate(0deg);
+      @keyframes mesh {
+        0% {
+          transform: rotate(0);
+          transform: rotate(0);
+          transform-origin: 50% -100%;
+          transform-origin: 50% -100%;
         }
 
-        to {
+        50% {
           transform: rotate(360deg);
           transform: rotate(360deg);
+          transform-origin: 50% -100%;
+          transform-origin: 50% -100%;
+        }
+
+        50.00001% {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+          transform-origin: 50% 200%;
+          transform-origin: 50% 200%;
+        }
+
+        100% {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+          transform-origin: 50% 200%;
+          transform-origin: 50% 200%;
         }
       }
     </style>
