diff --git a/src/assets/css/components/views/charts/chart.scss b/src/assets/css/components/views/charts/chart.scss
index 4ef32666..aef28daf 100644
--- a/src/assets/css/components/views/charts/chart.scss
+++ b/src/assets/css/components/views/charts/chart.scss
@@ -396,7 +396,7 @@
   background-color: rgba(255, 255, 255, .2);
   z-index: 1;
 
-  img {
+  /*img {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -414,83 +414,107 @@
       height: 20px;
       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--default {
+      width: 27px;
+      height: 27px;
+
+      .cn-loading__inner {
+        div {
+          width: 6px;
+          height: 6px;
+          border-radius: 3px / 3px;
+          transform-origin: 3px 13px;
+        }
+      }
+    }
+
+    &.cn-loading--small {
+      width: 20px;
+      height: 20px;
+
+      .cn-loading__inner {
+        div {
+          width: 5px;
+          height: 5px;
+          border-radius: 3px / 3px;
+          transform-origin: 0 9px;
+        }
+      }
+    }
+    .cn-loading__inner {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      transform: translateZ(0) scale(1);
+      backface-visibility: hidden;
+      transform-origin: 0 0;
+
+      div {
+        left: 10px;
+        top: 0;
+        position: absolute;
+        animation: cn-loading__inner linear 1s infinite;
+        background: #3c76cc;
+        box-sizing: content-box;
+      }
+      div:nth-child(1) {
+        transform: rotate(0deg);
+        animation-delay: -0.875s;
+        background: #3c76cc;
+      }
+      div:nth-child(2) {
+        transform: rotate(45deg);
+        animation-delay: -0.75s;
+        background: #3c76cc;
+      }
+      div:nth-child(3) {
+        transform: rotate(90deg);
+        animation-delay: -0.625s;
+        background: #3c76cc;
+      }
+      div:nth-child(4) {
+        transform: rotate(135deg);
+        animation-delay: -0.5s;
+        background: #3c76cc;
+      }
+      div:nth-child(5) {
+        transform: rotate(180deg);
+        animation-delay: -0.375s;
+        background: #3c76cc;
+      }
+      div:nth-child(6) {
+        transform: rotate(225deg);
+        animation-delay: -0.25s;
+        background: #3c76cc;
+      }
+      div:nth-child(7) {
+        transform: rotate(270deg);
+        animation-delay: -0.125s;
+        background: #3c76cc;
+      }
+      div:nth-child(8) {
+        transform: rotate(315deg);
+        animation-delay: 0s;
+        background: #3c76cc;
+      }
+    }
   }
-  .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 06704ae9..df20a2c6 100644
--- a/src/components/common/Loading.vue
+++ b/src/components/common/Loading.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="chart__loading" v-show="showLoading">
+  <div class="chart__loading" v-show="loading">
 <!--    <img :class="className" :src="path" alt="" :style="innerStyle">-->
-    <div class="cn-loading">
+    <div class="cn-loading" :class="className">
       <div class="cn-loading__inner">
       <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
       </div>
@@ -42,27 +42,25 @@ export default {
       }
     }
   },
-  /*setup (props) {
-    const path = window.location.protocol + '//' + window.location.host + '/images/loading.gif'
+  setup (props) {
     let className = ''
     switch (props.size) {
       case 'large': {
-        className = 'loading-img--large'
+        className = 'cn-loading--large'
         break
       }
       case 'small': {
-        className = 'loading-img--small'
+        className = 'cn-loading--small'
         break
       }
       default: {
-        className = 'loading-img--default'
+        className = 'cn-loading--default'
         break
       }
     }
     return {
-      path,
       className
     }
-  }*/
+  }
 }
 </script>