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>`