diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index aff5962fe..75f11bb1e 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -4,17 +4,29 @@
 
 ```html
 <div class="page-switch">
-  <div class="page-switch__wrapper">
-    <z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch>
-    <div class="page-switch__text">{{switchStateText}}</div>
-  </div>
-  <div class="page-switch__wrapper">
-    <z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch>
-    <div class="page-switch__text">ON, DISABLED</div>
-  </div>
-  <div class="page-switch__wrapper">
-    <z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
-    <div class="page-switch__text">OFF, DISABLED</div>
+  <h1 class="page-title">Switch</h1>
+  <h2 class="page-sub-title">基础用法</h2>
+  <div class="page-switch">
+    <div class="page-switch__wrapper">
+      <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+      <div class="page-switch__text">{{switchStateText}}</div>
+    </div>
+    <div class="page-switch__wrapper">
+      <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+      <div class="page-switch__text">ON, DISABLED</div>
+    </div>
+    <div class="page-switch__wrapper">
+      <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+      <div class="page-switch__text">OFF, DISABLED</div>
+    </div>
+    <div class="page-switch__wrapper">
+      <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+      <div class="page-switch__text">ON, LOADING</div>
+    </div>
+    <div class="page-switch__wrapper">
+      <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+      <div class="page-switch__text">OFF, LOADING</div>
+    </div>
   </div>
 </div>
 
diff --git a/docs/examples/switch.vue b/docs/examples/switch.vue
index ce70ae6e5..87c399acf 100644
--- a/docs/examples/switch.vue
+++ b/docs/examples/switch.vue
@@ -5,17 +5,25 @@
     <h2 class="page-sub-title">基础用法</h2>
     <div class="page-switch">
       <div class="page-switch__wrapper">
-        <z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch>
+        <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
         <div class="page-switch__text">{{switchStateText}}</div>
       </div>
       <div class="page-switch__wrapper">
-        <z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch>
+        <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
         <div class="page-switch__text">ON, DISABLED</div>
       </div>
       <div class="page-switch__wrapper">
-        <z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
+        <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
         <div class="page-switch__text">OFF, DISABLED</div>
       </div>
+      <div class="page-switch__wrapper">
+        <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+        <div class="page-switch__text">ON, LOADING</div>
+      </div>
+      <div class="page-switch__wrapper">
+        <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+        <div class="page-switch__text">OFF, LOADING</div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 1a26296ba..dc638ac84 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="z-switch" :class="switchState" @click="toggleState">
-    <div class="z-switch__node" :class="switchState"></div>
+  <div class="zan-switch" :class="switchState" @click="toggleState">
+    <div class="zan-switch__node" :class="switchState">
+      <zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
+    </div>
   </div>
 </template>
 
@@ -18,7 +20,7 @@
  * <z-switch checked="true" disabled="false"></o2-switch>
  */
 export default {
-  name: 'z-switch',
+  name: 'zan-switch',
   props: {
     checked: {
       type: Boolean,
diff --git a/packages/zanui-css/src/switch.css b/packages/zanui-css/src/switch.css
index 270a32104..2cf0b1ccf 100644
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
   @b switch { 
     height: 29px;
     width: 49px;
@@ -26,6 +26,15 @@
       }
     }
 
+    @e loading {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
     @when on {
       background-color: #44db5e;
       border-color: #44db5e;
@@ -37,14 +46,7 @@
     }
 
     @when disabled {
-      @when off {
-        background-color: #f2f2f2;
-        border-color: rgba(0, 0, 0, .1);
-      }
-      @when on {
-        background-color: #a6e7b1;
-        border-color: #a6e7b1;
-      }
+      opacity: .4;
     }
   }
 }