From f58ff79872a2eccc4f38ead61c977cefd7ad35ab Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Tue, 15 Oct 2019 17:40:21 +0800
Subject: [PATCH 1/2] add theme to spin

---
 .../components/spinDemo/enUS/basic.md         |  4 +
 .../components/spinDemo/enUS/index.md         |  5 ++
 .../components/spinDemo/enUS/wrap.md          | 54 ++++++++++++
 .../components/spinDemo/index.entry           |  0
 .../components/spinDemo/index.vue             | 35 --------
 .../components/spinDemo/scaffold.demo.vue     | 28 ------
 .../components/spinDemo/wrap.demo.vue         | 60 -------------
 .../components/spinDemo/zhCN/index.md         |  0
 packages/base/Loading/src/main.vue            | 86 +++++++++++--------
 packages/common/Spin/src/main.vue             |  8 ++
 styles/Loading.scss                           | 65 ++++++++++++++
 styles/Spin.scss                              |  2 +-
 styles/index.scss                             |  3 +-
 styles/themes/dark/components/Loading.scss    |  3 +
 styles/themes/dark/index.scss                 |  2 +
 styles/themes/light/components/Loading.scss   |  3 +
 styles/themes/light/index.scss                |  2 +
 17 files changed, 199 insertions(+), 161 deletions(-)
 create mode 100644 demo/documentation/components/spinDemo/enUS/basic.md
 create mode 100644 demo/documentation/components/spinDemo/enUS/index.md
 create mode 100644 demo/documentation/components/spinDemo/enUS/wrap.md
 create mode 100644 demo/documentation/components/spinDemo/index.entry
 delete mode 100644 demo/documentation/components/spinDemo/index.vue
 delete mode 100644 demo/documentation/components/spinDemo/scaffold.demo.vue
 delete mode 100644 demo/documentation/components/spinDemo/wrap.demo.vue
 create mode 100644 demo/documentation/components/spinDemo/zhCN/index.md
 create mode 100644 styles/Loading.scss
 create mode 100644 styles/themes/dark/components/Loading.scss
 create mode 100644 styles/themes/light/components/Loading.scss

diff --git a/demo/documentation/components/spinDemo/enUS/basic.md b/demo/documentation/components/spinDemo/enUS/basic.md
new file mode 100644
index 000000000..925e73978
--- /dev/null
+++ b/demo/documentation/components/spinDemo/enUS/basic.md
@@ -0,0 +1,4 @@
+# Basic
+```html
+<n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
+```
\ No newline at end of file
diff --git a/demo/documentation/components/spinDemo/enUS/index.md b/demo/documentation/components/spinDemo/enUS/index.md
new file mode 100644
index 000000000..18272d7cc
--- /dev/null
+++ b/demo/documentation/components/spinDemo/enUS/index.md
@@ -0,0 +1,5 @@
+# Divider
+```demo
+basic
+wrap
+```
\ No newline at end of file
diff --git a/demo/documentation/components/spinDemo/enUS/wrap.md b/demo/documentation/components/spinDemo/enUS/wrap.md
new file mode 100644
index 000000000..959549933
--- /dev/null
+++ b/demo/documentation/components/spinDemo/enUS/wrap.md
@@ -0,0 +1,54 @@
+# Wrap
+```html
+<div
+>
+  <n-spin
+    style="display:inline-block"
+    size="in-small"
+    :spinning="spinning"
+  >
+    <n-button size="small">
+      Small Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block"
+    size="in-medium"
+    :spinning="spinning"
+  >
+    <n-button size="medium">
+      Medium Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block"
+    size="in-large"
+    :spinning="spinning"
+  >
+    <n-button size="large">
+      Large Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block" 
+    :spinning="spinning"
+  >
+    <n-alert
+      title="Success Text"
+      type="success"
+    >
+      Leave it till tomorrow to unpack my case
+    </n-alert>
+  </n-spin>
+</div>
+ <pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
+```
+```js
+export default {
+  data () {
+    return {
+      spinning: false
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/spinDemo/index.entry b/demo/documentation/components/spinDemo/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/spinDemo/index.vue b/demo/documentation/components/spinDemo/index.vue
deleted file mode 100644
index bcbfb42b3..000000000
--- a/demo/documentation/components/spinDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Spin / n-spin
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-      <wrap />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-import wrap from './wrap.demo.vue'
-
-export default {
-  components: {
-    scaffold,
-    wrap
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/spinDemo/scaffold.demo.vue b/demo/documentation/components/spinDemo/scaffold.demo.vue
deleted file mode 100644
index fd291804b..000000000
--- a/demo/documentation/components/spinDemo/scaffold.demo.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      BasicUsage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/spinDemo/wrap.demo.vue b/demo/documentation/components/spinDemo/wrap.demo.vue
deleted file mode 100644
index c4c31faca..000000000
--- a/demo/documentation/components/spinDemo/wrap.demo.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Wrap
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="align-items: flex-start;"
-    >
-      <!--EXAMPLE_START-->
-      <n-spin
-        size="in-small"
-        :spinning="spinning"
-      >
-        <n-button size="small">
-          Small Spin
-        </n-button>
-      </n-spin>
-      <n-spin
-        size="in-medium"
-        :spinning="spinning"
-      >
-        <n-button size="medium">
-          Medium Spin
-        </n-button>
-      </n-spin>
-      <n-spin
-        size="in-large"
-        :spinning="spinning"
-      >
-        <n-button size="large">
-          Large Spin
-        </n-button>
-      </n-spin>
-      <n-spin :spinning="spinning">
-        <n-alert
-          title="Success Text"
-          type="success"
-        >
-          Leave it till tomorrow to unpack my case
-        </n-alert>
-      </n-spin>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      spinning: false
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/spinDemo/zhCN/index.md b/demo/documentation/components/spinDemo/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/base/Loading/src/main.vue b/packages/base/Loading/src/main.vue
index 4e90efe4b..6129a7517 100644
--- a/packages/base/Loading/src/main.vue
+++ b/packages/base/Loading/src/main.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="n-base-loading">
+  <div
+    class="n-base-loading"
+    :class="{[`n-${theme}-theme`]: theme}"
+  >
     <svg
       viewBox="25 25 50 50"
       class="n-base-loading-circular"
@@ -17,9 +20,20 @@
 </template>
 
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
   name: 'NBaseLoading',
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
+    theme: {
+      type: String,
+      default: ''
+    },
     strokeWidth: {
       type: Number,
       default: null
@@ -32,42 +46,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.n-base-loading {
-  line-height: 1;
-}
+// .n-base-loading {
+//   line-height: 1;
+// }
 
-.n-base-loading-circular {
-  height: 100%;
-  width: 100%;
-  animation: loading-rotate 2s linear infinite;
-  .n-base-loading-circular-path {
-    animation: loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90,150;
-    stroke-dashoffset: 0;
-    stroke-width: 8;
-    stroke: #63E2B7;
-    stroke-linecap: round;
-  }
-}
+// .n-base-loading-circular {
+//   height: 100%;
+//   width: 100%;
+//   animation: loading-rotate 2s linear infinite;
+//   .n-base-loading-circular-path {
+//     animation: loading-dash 1.5s ease-in-out infinite;
+//     stroke-dasharray: 90,150;
+//     stroke-dashoffset: 0;
+//     stroke-width: 8;
+//     stroke: #63E2B7;
+//     stroke-linecap: round;
+//   }
+// }
 
-@keyframes loading-rotate {
-  to {
-    transform: rotate(1turn)
-  }
-}
+// @keyframes loading-rotate {
+//   to {
+//     transform: rotate(1turn)
+//   }
+// }
 
-@keyframes loading-dash {
-  0% {
-    stroke-dasharray: 1,200;
-    stroke-dashoffset: 0
-  }
-  50% {
-    stroke-dasharray: 90,150;
-    stroke-dashoffset: -40px
-  }
-  to {
-    stroke-dasharray: 90,150;
-    stroke-dashoffset: -120px
-  }
-}
+// @keyframes loading-dash {
+//   0% {
+//     stroke-dasharray: 1,200;
+//     stroke-dashoffset: 0
+//   }
+//   50% {
+//     stroke-dasharray: 90,150;
+//     stroke-dashoffset: -40px
+//   }
+//   to {
+//     stroke-dasharray: 90,150;
+//     stroke-dashoffset: -120px
+//   }
+// }
 </style>
diff --git a/packages/common/Spin/src/main.vue b/packages/common/Spin/src/main.vue
index 64d489c6f..0aa79ab19 100644
--- a/packages/common/Spin/src/main.vue
+++ b/packages/common/Spin/src/main.vue
@@ -11,6 +11,7 @@
         :class="{
           [`n-spin--${size}-size`]: true
         }"
+        :theme="synthesizedTheme"
       />
     </transition>
     <div
@@ -29,17 +30,24 @@
     :class="{
       [`n-spin--${size}-size`]: size
     }"
+    :theme="synthesizedTheme"
   />
 </template>
 
 <script>
 import NBaseLoading from '../../../base/Loading'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NSpin',
   components: {
     NBaseLoading
   },
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
     size: {
       type: [String, Number],
diff --git a/styles/Loading.scss b/styles/Loading.scss
new file mode 100644
index 000000000..bfa9c9f07
--- /dev/null
+++ b/styles/Loading.scss
@@ -0,0 +1,65 @@
+@import './mixins/mixins.scss';
+@import './themes/vars.scss';
+
+
+@keyframes loading-rotate {
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0
+  }
+  50% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -40px
+  }
+  to {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -120px
+  }
+}
+@include themes-mixin {
+  @include b(base-loading) {
+    @include once {
+      line-height: 1;
+    }
+    @include b(base-loading-circular) {
+      @include once {
+        height: 100%;
+        width: 100%;
+        animation: loading-rotate 2s linear infinite;
+      }
+      @include b(base-loading-circular-path) {
+        stroke: $--loading-border-color;
+        @include once {
+          animation: loading-dash 1.5s ease-in-out infinite;
+          stroke-dasharray: 90,150;
+          stroke-dashoffset: 0;
+          stroke-width: 8;
+          stroke-linecap: round;
+        }
+      }
+    }
+  }
+}
+// .n-base-loading {
+//   line-height: 1;
+// }
+
+// .n-base-loading-circular {
+//   height: 100%;
+//   width: 100%;
+//   animation: loading-rotate 2s linear infinite;
+//   .n-base-loading-circular-path {
+//     animation: loading-dash 1.5s ease-in-out infinite;
+//     stroke-dasharray: 90,150;
+//     stroke-dashoffset: 0;
+//     stroke-width: 8;
+//     stroke: #63E2B7;
+//     stroke-linecap: round;
+//   }
+// }
\ No newline at end of file
diff --git a/styles/Spin.scss b/styles/Spin.scss
index e31323ca9..e8d061692 100644
--- a/styles/Spin.scss
+++ b/styles/Spin.scss
@@ -63,4 +63,4 @@
       opacity: .5;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/index.scss b/styles/index.scss
index 7563afb43..826673937 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -55,4 +55,5 @@
 @import "./Popover.scss";
 @import "./AdvancedTable.scss";
 @import "./NimbusIcon.scss";
-@import "./Confirm.scss";
\ No newline at end of file
+@import "./Confirm.scss";
+@import "./Loading.scss"
\ No newline at end of file
diff --git a/styles/themes/dark/components/Loading.scss b/styles/themes/dark/components/Loading.scss
new file mode 100644
index 000000000..131c9173e
--- /dev/null
+++ b/styles/themes/dark/components/Loading.scss
@@ -0,0 +1,3 @@
+@mixin setup-dark-loading {
+  $--loading-border-color: $--n-primary-color !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index f2737540d..3f0d7ae83 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -3,6 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
+@import "components/Loading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -50,6 +51,7 @@
   @include setup-dark-nimbus-service-layout;
   @include setup-dark-divider;
   @include setup-dark-scrollbar;
+  @include setup-dark-loading;
   @include setup-dark-button;
   @include setup-dark-base-select-menu;
   @include setup-dark-base-picker;
diff --git a/styles/themes/light/components/Loading.scss b/styles/themes/light/components/Loading.scss
new file mode 100644
index 000000000..65d99d0a7
--- /dev/null
+++ b/styles/themes/light/components/Loading.scss
@@ -0,0 +1,3 @@
+@mixin setup-light-loading {
+  $--loading-border-color: $--n-primary-color !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 91e164b39..bacfdfd14 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -3,6 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
+@import "components/Loading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -46,6 +47,7 @@
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;
   @include setup-light-scrollbar;
+  @include setup-light-loading;
   @include setup-light-button;
   @include setup-light-base-select-menu;
   @include setup-light-base-picker;

From 5d061664327ae7f81dd9683692ec47be430309ed Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Tue, 15 Oct 2019 18:01:18 +0800
Subject: [PATCH 2/2] refactor(spin): rename loading.scss

---
 .../{spinDemo => spin}/enUS/basic.md          |  0
 .../{spinDemo => spin}/enUS/index.md          |  0
 .../{spinDemo => spin}/enUS/wrap.md           |  0
 .../components/{spinDemo => spin}/index.entry |  0
 .../{spinDemo => spin}/zhCN/index.md          |  0
 demo/init.js                                  |  4 +-
 packages/base/Loading/src/main.vue            | 74 ++++---------------
 packages/common/Spin/src/main.vue             | 23 +++---
 styles/{Loading.scss => BaseLoading.scss}     | 30 ++------
 styles/index.scss                             |  2 +-
 .../themes/dark/components/BaseLoading.scss   |  3 +
 styles/themes/dark/components/Loading.scss    |  3 -
 styles/themes/dark/index.scss                 |  4 +-
 .../themes/light/components/BaseLoading.scss  |  3 +
 styles/themes/light/components/Loading.scss   |  3 -
 styles/themes/light/index.scss                |  4 +-
 16 files changed, 43 insertions(+), 110 deletions(-)
 rename demo/documentation/components/{spinDemo => spin}/enUS/basic.md (100%)
 rename demo/documentation/components/{spinDemo => spin}/enUS/index.md (100%)
 rename demo/documentation/components/{spinDemo => spin}/enUS/wrap.md (100%)
 rename demo/documentation/components/{spinDemo => spin}/index.entry (100%)
 rename demo/documentation/components/{spinDemo => spin}/zhCN/index.md (100%)
 rename styles/{Loading.scss => BaseLoading.scss} (54%)
 create mode 100644 styles/themes/dark/components/BaseLoading.scss
 delete mode 100644 styles/themes/dark/components/Loading.scss
 create mode 100644 styles/themes/light/components/BaseLoading.scss
 delete mode 100644 styles/themes/light/components/Loading.scss

diff --git a/demo/documentation/components/spinDemo/enUS/basic.md b/demo/documentation/components/spin/enUS/basic.md
similarity index 100%
rename from demo/documentation/components/spinDemo/enUS/basic.md
rename to demo/documentation/components/spin/enUS/basic.md
diff --git a/demo/documentation/components/spinDemo/enUS/index.md b/demo/documentation/components/spin/enUS/index.md
similarity index 100%
rename from demo/documentation/components/spinDemo/enUS/index.md
rename to demo/documentation/components/spin/enUS/index.md
diff --git a/demo/documentation/components/spinDemo/enUS/wrap.md b/demo/documentation/components/spin/enUS/wrap.md
similarity index 100%
rename from demo/documentation/components/spinDemo/enUS/wrap.md
rename to demo/documentation/components/spin/enUS/wrap.md
diff --git a/demo/documentation/components/spinDemo/index.entry b/demo/documentation/components/spin/index.entry
similarity index 100%
rename from demo/documentation/components/spinDemo/index.entry
rename to demo/documentation/components/spin/index.entry
diff --git a/demo/documentation/components/spinDemo/zhCN/index.md b/demo/documentation/components/spin/zhCN/index.md
similarity index 100%
rename from demo/documentation/components/spinDemo/zhCN/index.md
rename to demo/documentation/components/spin/zhCN/index.md
diff --git a/demo/init.js b/demo/init.js
index a79349470..3a7ec74dc 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -61,7 +61,7 @@ import popselectDemo from './documentation/components/popselectDemo'
 import app from './documentation/components/app'
 import advanceTableDemos from './documentation/components/advanceTableDemos'
 import transferDemo from './documentation/components/transferDemo'
-import spinDemo from './documentation/components/spinDemo'
+import spin from './documentation/components/spin'
 import drawerDemo from './documentation/components/drawerDemo'
 import loadingBar from './documentation/components/loadingBar'
 import timeDemo from './documentation/components/timeDemo'
@@ -181,7 +181,7 @@ const routes = [
       { path: '/n-app', component: app },
       { path: '/n-cancel-mark-debug', component: cancelMarkDebug },
       { path: '/n-transfer', component: transferDemo },
-      { path: '/n-spin', component: spinDemo },
+      { path: '/n-spin', component: spin },
       { path: '/n-drawer', component: drawerDemo },
       { path: '/n-loading-bar', component: loadingBar },
       { path: '/n-time', component: timeDemo },
diff --git a/packages/base/Loading/src/main.vue b/packages/base/Loading/src/main.vue
index 6129a7517..06c06852c 100644
--- a/packages/base/Loading/src/main.vue
+++ b/packages/base/Loading/src/main.vue
@@ -1,34 +1,29 @@
 <template>
   <div
-    class="n-base-loading"
     :class="{[`n-${theme}-theme`]: theme}"
+    class="n-base-loading"
   >
     <svg
-      viewBox="25 25 50 50"
       class="n-base-loading-circular"
-    ><circle
-      cx="50"
-      cy="50"
-      r="20"
-      fill="none"
-      :style="{
-        strokeWidth
-      }"
-      class="n-base-loading-circular-path"
-    /></svg>
+      viewBox="25 25 50 50"
+    >
+      <circle
+        :style="{
+          strokeWidth
+        }"
+        class="n-base-loading-circular-path"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="20"
+      />
+    </svg>
   </div>
 </template>
 
 <script>
-import withapp from '../../../mixins/withapp'
-import themeable from '../../../mixins/themeable'
-
 export default {
   name: 'NBaseLoading',
-  mixins: [
-    withapp,
-    themeable
-  ],
   props: {
     theme: {
       type: String,
@@ -44,44 +39,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-// .n-base-loading {
-//   line-height: 1;
-// }
-
-// .n-base-loading-circular {
-//   height: 100%;
-//   width: 100%;
-//   animation: loading-rotate 2s linear infinite;
-//   .n-base-loading-circular-path {
-//     animation: loading-dash 1.5s ease-in-out infinite;
-//     stroke-dasharray: 90,150;
-//     stroke-dashoffset: 0;
-//     stroke-width: 8;
-//     stroke: #63E2B7;
-//     stroke-linecap: round;
-//   }
-// }
-
-// @keyframes loading-rotate {
-//   to {
-//     transform: rotate(1turn)
-//   }
-// }
-
-// @keyframes loading-dash {
-//   0% {
-//     stroke-dasharray: 1,200;
-//     stroke-dashoffset: 0
-//   }
-//   50% {
-//     stroke-dasharray: 90,150;
-//     stroke-dashoffset: -40px
-//   }
-//   to {
-//     stroke-dasharray: 90,150;
-//     stroke-dashoffset: -120px
-//   }
-// }
-</style>
diff --git a/packages/common/Spin/src/main.vue b/packages/common/Spin/src/main.vue
index 0aa79ab19..8c1cc36f2 100644
--- a/packages/common/Spin/src/main.vue
+++ b/packages/common/Spin/src/main.vue
@@ -5,32 +5,32 @@
   >
     <transition name="n-spin--transition">
       <n-base-loading
-        v-if="spinning"
-        class="n-spin"
-        :stroke-width="strokeWidth"
         :class="{
           [`n-spin--${size}-size`]: true
         }"
+        :stroke-width="strokeWidth"
         :theme="synthesizedTheme"
+        v-if="spinning"
+        class="n-spin"
       />
     </transition>
     <div
-      class="n-spin-content"
       :class="{
         'n-spin-content--spinning': spinning
       }"
+      class="n-spin-content"
     >
       <slot />
     </div>
   </div>
   <n-base-loading
-    v-else
-    class="n-spin"
-    :stroke-width="strokeWidth"
     :class="{
       [`n-spin--${size}-size`]: size
     }"
+    :stroke-width="strokeWidth"
     :theme="synthesizedTheme"
+    v-else
+    class="n-spin"
   />
 </template>
 
@@ -44,10 +44,7 @@ export default {
   components: {
     NBaseLoading
   },
-  mixins: [
-    withapp,
-    themeable
-  ],
+  mixins: [withapp, themeable],
   props: {
     size: {
       type: [String, Number],
@@ -62,8 +59,6 @@ export default {
       default: null
     }
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
diff --git a/styles/Loading.scss b/styles/BaseLoading.scss
similarity index 54%
rename from styles/Loading.scss
rename to styles/BaseLoading.scss
index bfa9c9f07..008aeef8f 100644
--- a/styles/Loading.scss
+++ b/styles/BaseLoading.scss
@@ -2,13 +2,13 @@
 @import './themes/vars.scss';
 
 
-@keyframes loading-rotate {
+@keyframes n-base-loading-rotate {
   to {
     transform: rotate(1turn)
   }
 }
 
-@keyframes loading-dash {
+@keyframes n-base-loading-dash {
   0% {
     stroke-dasharray: 1,200;
     stroke-dashoffset: 0
@@ -31,12 +31,13 @@
       @include once {
         height: 100%;
         width: 100%;
-        animation: loading-rotate 2s linear infinite;
+        animation: n-base-loading-rotate 2s linear infinite;
       }
       @include b(base-loading-circular-path) {
-        stroke: $--loading-border-color;
+        stroke: $--base-loading-stroke;
         @include once {
-          animation: loading-dash 1.5s ease-in-out infinite;
+          transition: stroke .3s $default-cubic-bezier;
+          animation: n-base-loading-dash 1.5s ease-in-out infinite;
           stroke-dasharray: 90,150;
           stroke-dashoffset: 0;
           stroke-width: 8;
@@ -45,21 +46,4 @@
       }
     }
   }
-}
-// .n-base-loading {
-//   line-height: 1;
-// }
-
-// .n-base-loading-circular {
-//   height: 100%;
-//   width: 100%;
-//   animation: loading-rotate 2s linear infinite;
-//   .n-base-loading-circular-path {
-//     animation: loading-dash 1.5s ease-in-out infinite;
-//     stroke-dasharray: 90,150;
-//     stroke-dashoffset: 0;
-//     stroke-width: 8;
-//     stroke: #63E2B7;
-//     stroke-linecap: round;
-//   }
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index 826673937..2424fc9a0 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -56,4 +56,4 @@
 @import "./AdvancedTable.scss";
 @import "./NimbusIcon.scss";
 @import "./Confirm.scss";
-@import "./Loading.scss"
\ No newline at end of file
+@import "./BaseLoading.scss"
\ No newline at end of file
diff --git a/styles/themes/dark/components/BaseLoading.scss b/styles/themes/dark/components/BaseLoading.scss
new file mode 100644
index 000000000..e544c725c
--- /dev/null
+++ b/styles/themes/dark/components/BaseLoading.scss
@@ -0,0 +1,3 @@
+@mixin setup-dark-base-loading {
+  $--base-loading-stroke: $--n-primary-color !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/Loading.scss b/styles/themes/dark/components/Loading.scss
deleted file mode 100644
index 131c9173e..000000000
--- a/styles/themes/dark/components/Loading.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin setup-dark-loading {
-  $--loading-border-color: $--n-primary-color !global;
-}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 3f0d7ae83..0bd5d69b6 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -3,7 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
-@import "components/Loading.scss";
+@import "components/BaseLoading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -51,7 +51,7 @@
   @include setup-dark-nimbus-service-layout;
   @include setup-dark-divider;
   @include setup-dark-scrollbar;
-  @include setup-dark-loading;
+  @include setup-dark-base-loading;
   @include setup-dark-button;
   @include setup-dark-base-select-menu;
   @include setup-dark-base-picker;
diff --git a/styles/themes/light/components/BaseLoading.scss b/styles/themes/light/components/BaseLoading.scss
new file mode 100644
index 000000000..116914fb4
--- /dev/null
+++ b/styles/themes/light/components/BaseLoading.scss
@@ -0,0 +1,3 @@
+@mixin setup-light-base-loading {
+  $--base-loading-stroke: $--n-primary-color !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Loading.scss b/styles/themes/light/components/Loading.scss
deleted file mode 100644
index 65d99d0a7..000000000
--- a/styles/themes/light/components/Loading.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin setup-light-loading {
-  $--loading-border-color: $--n-primary-color !global;
-}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index bacfdfd14..209d37fa6 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -3,7 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
-@import "components/Loading.scss";
+@import "components/BaseLoading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -47,7 +47,7 @@
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;
   @include setup-light-scrollbar;
-  @include setup-light-loading;
+  @include setup-light-base-loading;
   @include setup-light-button;
   @include setup-light-base-select-menu;
   @include setup-light-base-picker;