feat: 变更 loading 样式为 3 个小圆点

src/components/loading.vue

@@ -1,74 +1,55 @@
 <template>
   <span class="log-loading">
     <slot>
-      <svg class="circular" viewBox="25 25 50 50">
-        <circle class="path" cx="50" cy="50" r="20" fill="none" />
-      </svg>
-      <span>{{ loadingText }}</span>
+      <span class="loading-dots">
+        <span>•</span>
+        <span>•</span>
+        <span>•</span>
+      </span>
     </slot>
   </span>
 </template>
 <script>
 export default {
-  name: 'LogLoading',
-  props: {
-    loadingText: {
-      type: String,
-      default: 'loading...'
-    }
-  }
+  name: 'LogLoading'
 }
 </script>
+
 <style lang="less">
 .log-loading {
-  .circular {
-    height: 10px;
-    width: 10px;
-    -webkit-animation: log-loading 2s linear infinite;
-    animation: log-loading 2s linear infinite;
-    // 位置相关
+  .loading-dots {
     margin-right: 3px;
 
-    .path {
-      -webkit-animation: loading-dash 1.5s ease-in-out infinite;
-      animation: loading-dash 1.5s ease-in-out infinite;
-      stroke-dasharray: 90, 150;
-      stroke-dashoffset: 0;
-      stroke-width: 2;
-      stroke: #d6d6d6;
-      stroke-linecap: round;
-    }
-  }
-}
+    span {
+      animation: blink 1.4s infinite both;
+      margin-left: -1px;
 
-@keyframes log-loading {
-  0% {
-    transform: rotate(0deg);
-  }
+      &:first-child {
+        margin-left: 0;
+      }
 
-  50% {
-    transform: rotate(180deg);
-  }
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
 
-  100% {
-    transform: rotate(360deg);
-  }
-}
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
 
-@keyframes loading-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
+    @keyframes blink {
+      0% {
+        opacity: 0.2;
+      }
 
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -40px;
-  }
+      20% {
+        opacity: 1;
+      }
 
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -120px;
+      100% {
+        opacity: 0.2;
+      }
+    }
   }
 }
 </style>