[Improvement] Loading: change default type to circular (#623)

packages/actionsheet/index.vue

@@ -17,7 +17,7 @@
             <span class="van-actionsheet__name">{{ item.name }}</span>
             <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
           </template>
-          <loading v-else class="van-actionsheet__loading" type="circle" />
+          <loading v-else class="van-actionsheet__loading" size="20px" />
         </li>
       </ul>
       <div

packages/button/index.vue

@@ -16,12 +16,7 @@
     ]"
     @click="onClick"
   >
-    <loading
-      v-if="loading"
-      class="van-button__icon-loading"
-      type="circle"
-      :color="type === 'default' ? 'black' : 'white'"
-    />
+    <loading v-if="loading" size="20px" :color="type === 'default' ? 'black' : 'white'" />
     <span class="van-button__text">
       <slot>{{ text }}</slot>
     </span>

packages/loading/index.vue

@@ -21,7 +21,7 @@ export default {
     size: String,
     type: {
       type: String,
-      default: 'gradient-circle'
+      default: 'circular'
     },
     color: {
       type: String,

packages/picker/index.vue

@@ -8,7 +8,7 @@
       </slot>
     </div>
     <div v-if="loading" class="van-picker__loading">
-      <loading type="circular" />
+      <loading />
     </div>
     <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
       <picker-column

packages/toast/toast.vue

@@ -10,7 +10,7 @@
         <template v-if="displayStyle === 'default'">
           <loading v-if="type === 'loading'" color="white" />
           <icon v-else class="van-toast__icon" :name="type" />
-          <div v-if="message !== undefined" class="van-toast__text">{{ message }}</div>
+          <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
         </template>
       </div>
       <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
@@ -49,6 +49,10 @@ export default create({
   computed: {
     displayStyle() {
       return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
+    },
+
+    hasMessage() {
+      return this.message || this.message === 0;
     }
   }
 });

packages/vant-css/src/button.css

@@ -31,10 +31,6 @@
     opacity: .3;
   }
 
-  &__icon-loading {
-    display: inline-block;
-  }
-
   &--default {
     color: $button-default-color;
     background-color: $button-default-background-color;

packages/vant-css/src/switch.css

@@ -30,13 +30,11 @@
   }
 
   &__loading {
+    top: 50%;
+    left: 50%;
     width: 16px;
     height: 16px;
-    position: relative;
-    left: 50%;
-    top: 50%;
     transform: translate3d(-50%, -50%, 0);
-    margin: 0;
   }
 
   &--on {