From 7623839097c3f13b1182a5bc73ac8ceaaf5a619d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 24 Aug 2022 19:17:54 +0800
Subject: [PATCH] =?UTF-8?q?style:=20loading=E8=B0=83=E6=95=B4=E4=B8=BAcss?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts/chart.scss    | 76 +++++++++++++++++++
 src/components/common/Loading.vue             | 11 ++-
 2 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/components/views/charts/chart.scss b/src/assets/css/components/views/charts/chart.scss
index 0453200c..4ef32666 100644
--- a/src/assets/css/components/views/charts/chart.scss
+++ b/src/assets/css/components/views/charts/chart.scss
@@ -415,6 +415,82 @@
       width: 20px;
     }
   }
+
+  @keyframes cn-loading__inner {
+    0% { opacity: 1 }
+    100% { opacity: 0 }
+  }
+  .cn-loading__inner div {
+    left: 10px;
+    top: 0;
+    position: absolute;
+    animation: cn-loading__inner linear 1s infinite;
+    background: #3c76cc;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px / 3px;
+    transform-origin: 3px 13px;
+  }
+  .cn-loading__inner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -0.875s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(2) {
+    transform: rotate(45deg);
+    animation-delay: -0.75s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(3) {
+    transform: rotate(90deg);
+    animation-delay: -0.625s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(4) {
+    transform: rotate(135deg);
+    animation-delay: -0.5s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(5) {
+    transform: rotate(180deg);
+    animation-delay: -0.375s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(6) {
+    transform: rotate(225deg);
+    animation-delay: -0.25s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(7) {
+    transform: rotate(270deg);
+    animation-delay: -0.125s;
+    background: #3c76cc;
+  }
+  .cn-loading__inner div:nth-child(8) {
+    transform: rotate(315deg);
+    animation-delay: 0s;
+    background: #3c76cc;
+  }
+  .cn-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 27px;
+    height: 27px;
+    display: inline-block;
+    overflow: hidden;
+    background: transparent;
+  }
+  .cn-loading__inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0;
+  }
+  .cn-loading__inner div { box-sizing: content-box; }
 }
 
 .map-back {
diff --git a/src/components/common/Loading.vue b/src/components/common/Loading.vue
index 358f1f11..06704ae9 100644
--- a/src/components/common/Loading.vue
+++ b/src/components/common/Loading.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="chart__loading" v-show="showLoading">
-    <img :class="className" :src="path" alt="" :style="innerStyle">
+<!--    <img :class="className" :src="path" alt="" :style="innerStyle">-->
+    <div class="cn-loading">
+      <div class="cn-loading__inner">
+      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -37,7 +42,7 @@ export default {
       }
     }
   },
-  setup (props) {
+  /*setup (props) {
     const path = window.location.protocol + '//' + window.location.host + '/images/loading.gif'
     let className = ''
     switch (props.size) {
@@ -58,6 +63,6 @@ export default {
       path,
       className
     }
-  }
+  }*/
 }
 </script>