From 184c894b5eb15a01465b5f2b2747c2631adbeacc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 5 Jun 2025 17:45:52 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=20loading=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F-=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=A4=8D=E6=9D=82=E7=9A=84=20dot=20=E5=8A=A8=E7=94=BB=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=B8=BA=E7=AE=80=E5=8D=95=E7=9A=84=20spinne?=
 =?UTF-8?q?r=20=E5=8A=A8=E7=94=BB=20-=20=E4=BC=98=E5=8C=96=20loading.scss?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6=EF=BC=8C=E5=A4=A7=E5=B9=85?=
 =?UTF-8?q?=E5=87=8F=E5=B0=91=E4=BB=A3=E7=A0=81=E9=87=8F=20-=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=20loading.js=20=E4=B8=AD=E7=9A=84=20HTML=20=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E7=AE=80=E5=8C=96=E4=B8=BA=E5=8D=95=E4=B8=AA?=
 =?UTF-8?q?=20spinner=20=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/loading.scss      | 222 ++++--------------------------
 src/components/loading/loading.js |  24 +---
 2 files changed, 31 insertions(+), 215 deletions(-)

diff --git a/src/assets/sass/loading.scss b/src/assets/sass/loading.scss
index d9664ef..491cca0 100644
--- a/src/assets/sass/loading.scss
+++ b/src/assets/sass/loading.scss
@@ -3,204 +3,42 @@
    z-index: 3000!important;
 }
 .render-loading{
-  .container {
-    width: 200px;
-    height: 200px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    margin: auto;
-    filter: url("#goo");
-    animation: rotate-move 2s ease-in-out infinite;
-  }
-
-  .dot {
-    width: 70px;
-    height: 70px;
+  .spinner {
+    width: 56px;
+    height: 56px;
+    display: grid;
+    border: 4px solid #0000;
     border-radius: 50%;
-    background-color: #000;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
+    border-right-color: #004dff;
+    animation: spinner-a4dj62 1s infinite linear;
   }
 
-  .dot-3 {
-    background-color: #ff1717;
-    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
+  .spinner::before,
+  .spinner::after {
+    content: "";
+    grid-area: 1/1;
+
+    margin: 2px;
+    border: inherit;
+    border-radius: 50%;
+    animation: spinner-a4dj62 2s infinite;
+  }
+  .spinner::after{
+    border-right-color:#2E5CA9
+  }
+  .spinner::before{
+    border-right-color:#F6AA21;
+  }
+  .spinner{
+    border-right-color:rgba(135, 162, 208, 0.5)}
+  .spinner::after {
+    margin: 8px;
+    animation-duration: 3s;
   }
 
-  .dot-2 {
-    background-color: #0051ff;
-    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
-  }
-
-  .dot-1 {
-    background-color: #ffc400;
-    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
-  }
-
-  @keyframes dot-3-move {
-    20% {
-      transform: scale(1);
-    }
-    45% {
-      transform: translateY(-18px) scale(0.45);
-    }
-    60% {
-      transform: translateY(-90px) scale(0.45);
-    }
-    80% {
-      transform: translateY(-90px) scale(0.45);
-    }
+  @keyframes spinner-a4dj62 {
     100% {
-      transform: translateY(0px) scale(1);
+      transform: rotate(1turn);
     }
   }
-
-  @keyframes dot-2-move {
-    20% {
-      transform: scale(1);
-    }
-    45% {
-      transform: translate(-16px, 12px) scale(0.45);
-    }
-    60% {
-      transform: translate(-80px, 60px) scale(0.45);
-    }
-    80% {
-      transform: translate(-80px, 60px) scale(0.45);
-    }
-    100% {
-      transform: translateY(0px) scale(1);
-    }
-  }
-
-  @keyframes dot-1-move {
-    20% {
-      transform: scale(1);
-    }
-    45% {
-      transform: translate(16px, 12px) scale(0.45);
-    }
-    60% {
-      transform: translate(80px, 60px) scale(0.45);
-    }
-    80% {
-      transform: translate(80px, 60px) scale(0.45);
-    }
-    100% {
-      transform: translateY(0px) scale(1);
-    }
-  }
-
-  @keyframes rotate-move {
-    55% {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
-    80% {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-    100% {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-  }
-
-  @keyframes index {
-    0%,
-    100% {
-      z-index: 3;
-    }
-    33.3% {
-      z-index: 2;
-    }
-    66.6% {
-      z-index: 1;
-    }
-  }
-
-}
-
-
-
-
- //speakLoading
-
- .loader3 {
-   display: flex;
-   justify-content: center;
-   align-items: center;
- }
-
- .bars {
-   width: 10px;
-   height: 20px;
-   margin: 0 2px;
-   border-radius: 4px;
-   animation: loader3 1.2s ease-in-out infinite;
- }
- .bar1 {
-   background-color: #4285F4;
-   animation-delay: -0.8s;
- }
- .bar2 {
-   background-color: #4285F4;
-   animation-delay: -0.7s;
- }
-
- .bar3 {
-   background-color: #4285F4;
-   animation-delay: -0.6s;
- }
-
- .bar4 {
-   background-color: #4285F4;
-   animation-delay: -0.5s;
- }
-
- .bar5 {
-   background-color: #4285F4;
-   animation-delay: -0.4s;
- }
-
- .bar6 {
-   background-color: #4285F4;
-   animation-delay: -0.3s;
- }
-
- .bar7 {
-   background-color: #4285F4;
-   animation-delay: -0.2s;
- }
-
- .bar8 {
-   background-color: #4285F4;
-   animation-delay: -0.1s;
- }
-
- .bar9 {
-   background-color: #4285F4;
-   animation-delay: 0s;
- }
-
- .bar10 {
-   background-color: #4285F4;
-   animation-delay: 0.1s;
- }
-
- @keyframes loader3 {
-   0% {
-     transform: scale(1);
-   }
-
-   20% {
-     transform: scale(1, 2.32);
-   }
-
-   40% {
-     transform: scale(1);
-   }
  }
diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
index 991fb59..9572c03 100644
--- a/src/components/loading/loading.js
+++ b/src/components/loading/loading.js
@@ -1,29 +1,7 @@
 const loadingTemp = `<div class='render-loading'>
 <!--以下内容替换-->
 <!--替换完成之后修改loading.scss 保留render-loading-->
-<div class="container">
-  <div class="dot dot-1"></div>
-  <div class="dot dot-2"></div>
-  <div class="dot dot-3"></div>
-</div>
-
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <filter id="goo">
-      <feGaussianBlur
-        result="blur"
-        stdDeviation="10"
-        in="SourceGraphic"
-      ></feGaussianBlur>
-      <feColorMatrix
-        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"
-        mode="matrix"
-        in="blur"
-      ></feColorMatrix>
-    </filter>
-  </defs>
-</svg>
-
+<div class="spinner"></div>
 
 <!--以上内容替换-->
 </div>`