diff --git a/src/_base/loading/src/Loading.vue b/src/_base/loading/src/Loading.vue
index 4832b09ee..2d28bbed0 100644
--- a/src/_base/loading/src/Loading.vue
+++ b/src/_base/loading/src/Loading.vue
@@ -6,30 +6,41 @@
       stroke
     }"
   >
-    <svg
-      class="n-base-loading-circular"
-      :viewBox="`0 0 ${radius * 2} ${radius * 2}`"
-    >
-      <circle
-        :style="{
-          strokeWidth
-        }"
-        class="n-base-loading-circular-path"
-        :cx="radius"
-        :cy="radius"
-        fill="none"
-        :r="radius - strokeWidth / 2"
-      />
-    </svg>
+    <n-icon-switch-transition>
+      <svg
+        v-if="show"
+        key="loading"
+        class="n-base-loading-circular n-base-loading__icon"
+        :viewBox="`0 0 ${radius * 2} ${radius * 2}`"
+      >
+        <circle
+          :style="{
+            strokeWidth
+          }"
+          class="n-base-loading-circular-path"
+          :cx="radius"
+          :cy="radius"
+          fill="none"
+          :r="radius - strokeWidth / 2"
+        />
+      </svg>
+      <div v-else key="placeholder" class="n-base-loading__placeholder">
+        <slot />
+      </div>
+    </n-icon-switch-transition>
   </div>
 </template>
 
 <script>
+import { NIconSwitchTransition } from '../../../_base'
 import { withCssr } from '../../../_mixins'
 import styles from './styles/'
 
 export default {
   name: 'BaseLoading',
+  components: {
+    NIconSwitchTransition
+  },
   mixins: [withCssr(styles)],
   props: {
     radius: {
@@ -38,7 +49,7 @@ export default {
     },
     theme: {
       type: String,
-      default: ''
+      default: undefined
     },
     strokeWidth: {
       type: Number,
@@ -46,7 +57,11 @@ export default {
     },
     stroke: {
       type: String,
-      default: null
+      default: undefined
+    },
+    show: {
+      type: Boolean,
+      default: true
     }
   }
 }
diff --git a/src/_base/loading/src/styles/themed-base.cssr.js b/src/_base/loading/src/styles/themed-base.cssr.js
index 6e9018b1f..5c430de94 100644
--- a/src/_base/loading/src/styles/themed-base.cssr.js
+++ b/src/_base/loading/src/styles/themed-base.cssr.js
@@ -1,25 +1,46 @@
-import { cTB, c, cB } from '../../../../_utils/cssr'
+import { cTB, c, cB, cE } from '../../../../_utils/cssr'
+import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
 
 const dashOffset = 500
 
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      color
-    } = props.$local
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        color
+      }
+    } = props
     return [
       cTB('base-loading', {
         raw: `
-          line-height: 1;
-          stroke: ${color};
+          position: relative;
+          line-height: 0;
+          width: 1em;
+          height: 1em;
           transition: stroke .3s ${cubicBezierEaseInOut};
         `
       }, [
+        cE('placeholder', {
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translateX(-50%) translateY(-50%)'
+        }, [
+          iconSwitchTransition({
+            left: '50%',
+            top: '50%',
+            originalTransform: 'translateX(-50%) translateY(-50%)'
+          })
+        ]),
+        cE('icon', [
+          iconSwitchTransition()
+        ]),
         cB('base-loading-circular', {
           raw: `
+            stroke: ${color};
             height: 100%;
             width: 100%;
             animation: n-base-loading-rotate 1.5s linear infinite;
diff --git a/src/_base/selection/src/Selection.vue b/src/_base/selection/src/Selection.vue
index d4358e1a2..371ce66a9 100644
--- a/src/_base/selection/src/Selection.vue
+++ b/src/_base/selection/src/Selection.vue
@@ -37,17 +37,13 @@
         >
           {{ option.label }}
         </n-tag>
-        <n-base-clear-button
-          v-if="showArrow"
-          class="n-base-selection__mark"
+        <suffix
           :theme="theme"
-          :show="mergedClearable && selected"
+          :loading="loading"
+          :show-arrow="showArrow"
+          :show-clear="mergedClearable && selected"
           @clear="handleClear"
-        >
-          <n-icon depth="4">
-            <chevron-down-icon />
-          </n-icon>
-        </n-base-clear-button>
+        />
       </div>
       <div class="n-base-selection__placeholder">
         {{ placeholder }}
@@ -91,17 +87,13 @@
             class="n-base-selection-input-tag__mirror"
           >{{ pattern ? pattern : '&nbsp;' }}</span>
         </div>
-        <n-base-clear-button
-          v-if="showArrow"
-          class="n-base-selection__mark"
+        <suffix
           :theme="theme"
-          :show="mergedClearable && selected"
+          :loading="loading"
+          :show-arrow="showArrow"
+          :show-clear="mergedClearable && selected"
           @clear="handleClear"
-        >
-          <n-icon depth="4">
-            <chevron-down-icon />
-          </n-icon>
-        </n-base-clear-button>
+        />
       </div>
       <div class="n-base-selection__placeholder">
         {{ placeholder }}
@@ -138,17 +130,13 @@
         >
           {{ filterablePlaceholder }}
         </div>
-        <n-base-clear-button
-          v-if="showArrow"
-          class="n-base-selection__mark"
+        <suffix
           :theme="theme"
-          :show="mergedClearable && selected"
+          :loading="loading"
+          :show-arrow="showArrow"
+          :show-clear="mergedClearable && selected"
           @clear="handleClear"
-        >
-          <n-icon depth="4">
-            <chevron-down-icon />
-          </n-icon>
-        </n-base-clear-button>
+        />
       </div>
     </template>
     <template v-else-if="!multiple && !filterable">
@@ -168,17 +156,13 @@
         >
           {{ placeholder }}
         </div>
-        <n-base-clear-button
-          v-if="showArrow"
-          class="n-base-selection__mark"
+        <suffix
           :theme="theme"
-          :show="mergedClearable && selected"
+          :loading="loading"
+          :show-arrow="showArrow"
+          :show-clear="mergedClearable && selected"
           @clear="handleClear"
-        >
-          <n-icon depth="4">
-            <chevron-down-icon />
-          </n-icon>
-        </n-base-clear-button>
+        />
       </div>
     </template>
     <div class="n-base-selection__border" />
@@ -188,8 +172,7 @@
 </template>
 
 <script>
-import NBaseClearButton from '../../clear-button'
-import { ChevronDownIcon } from '../../icons'
+import Suffix from './Suffix.vue'
 import { NTag } from '../../../tag/index.js'
 import { withCssr } from '../../../_mixins'
 import styles from './styles/index.js'
@@ -197,8 +180,7 @@ import styles from './styles/index.js'
 export default {
   name: 'BaseSelection',
   components: {
-    ChevronDownIcon,
-    NBaseClearButton,
+    Suffix,
     NTag
   },
   mixins: [withCssr(styles)],
diff --git a/src/_base/selection/src/Suffix.vue b/src/_base/selection/src/Suffix.vue
new file mode 100644
index 000000000..a9c0daae4
--- /dev/null
+++ b/src/_base/selection/src/Suffix.vue
@@ -0,0 +1,56 @@
+<template>
+  <n-base-loading
+    :theme="theme"
+    class="n-base-selection__mark"
+    :stroke-width="20"
+    :show="loading"
+  >
+    <n-base-clear-button
+      v-if="showArrow"
+      :theme="theme"
+      :show="showClear"
+      @clear="onClear"
+    >
+      <n-icon depth="4">
+        <chevron-down-icon />
+      </n-icon>
+    </n-base-clear-button>
+  </n-base-loading>
+</template>
+
+<script>
+import NBaseClearButton from '../../clear-button'
+import NBaseLoading from '../../loading'
+import { ChevronDownIcon } from '../../icons'
+
+export default {
+  name: 'BaseSelectionSuffix',
+  components: {
+    ChevronDownIcon,
+    NBaseLoading,
+    NBaseClearButton
+  },
+  props: {
+    theme: {
+      type: String,
+      default: undefined
+    },
+    showArrow: {
+      type: Boolean,
+      default: undefined
+    },
+    showClear: {
+      type: Boolean,
+      default: undefined
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    onClear: {
+      type: Function,
+      default: undefined
+    }
+  }
+}
+</script>