Switch add loading prop

src/styles/components/switch.less

@@ -14,6 +14,10 @@
     user-select: none;
     transition: all @transition-time @ease-in-out;
 
+    &-loading{
+        opacity: .4;
+    }
+
     &-inner {
         color: #fff;
         font-size: @font-size-small;
@@ -44,6 +48,26 @@
         width: 26px;
     }
 
+    &:before{
+        content: '';
+        display: none;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background-color: transparent;
+        position: absolute;
+        left: 3px;
+        top: 3px;
+        z-index: 1;
+        border: 1px solid @primary-color;
+        border-color: transparent transparent transparent @primary-color;
+        animation: switch-loading 1s linear;
+        animation-iteration-count: infinite;
+    }
+    &-loading:before{
+        display: block;
+    }
+
     &:focus {
         box-shadow: 0 0 0 2px fade(@primary-color, 20%);
         outline: 0;
@@ -64,11 +88,20 @@
         &:active:after {
             width: 14px;
         }
+        &:before{
+            width: 10px;
+            height: 10px;
+            left: 2px;
+            top: 2px;
+        }
     }
 
     &-small&-checked:after {
         left: 13px;
     }
+    &-small&-checked:before {
+        left: 14px;
+    }
 
     &-small:active&-checked:after {
         left: 11px;
@@ -88,6 +121,9 @@
     &-large&-checked:after {
         left: 35px;
     }
+    &-large&-checked:before {
+        left: 37px;
+    }
 
     &-large:active&-checked:after {
         left: 23px;
@@ -104,6 +140,9 @@
         &:after {
             left: 23px;
         }
+        &:before{
+            left: 25px;
+        }
 
         &:active:after {
             left: 15px;
@@ -124,4 +163,14 @@
             color: #ccc;
         }
     }
+    
 }
+
+@keyframes switch-loading {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}