update for v 2.0.0

components/loading/index.vue

@@ -1,6 +1,59 @@
 <template>
-  <div class="loading">
-    <img class="loading-img" src="./img/loading.png">
+  <div class="dv-loading">
+    <svg width="50px" height="50px">
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        fill="transparent"
+        stroke-width="3"
+        stroke-dasharray="31.415, 31.415"
+        stroke="#02bcfe"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0, 25 25;360, 25 25"
+          dur="1.5s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke"
+          values="#02bcfe;#3be6cb;#02bcfe"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="25"
+        cy="25"
+        r="10"
+        fill="transparent"
+        stroke-width="3"
+        stroke-dasharray="15.7, 15.7"
+        stroke="#3be6cb"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="360, 25 25;0, 25 25"
+          dur="1.5s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke"
+          values="#3be6cb;#02bcfe;#3be6cb"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -11,29 +64,17 @@ export default {
 </script>
 
 <style lang="less">
-.loading {
-  position: absolute;
-  top: 0px;
-  left: 0px;
+.dv-loading {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-  .loading-img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 30px;
-    height: 30px;
-    margin-left: -15px;
-    margin-top: -15px;
-    transform: rotate(0deg);
-    animation: round 1s linear infinite;
-  }
-
-  @keyframes round {
-    to {
-      transform: rotate(360deg)
-    }
+  .loading-tip {
+    font-size: 15px;
+    color: #fff;
   }
 }
 </style>