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

docs/demos/views/button.vue

@@ -92,6 +92,10 @@ export default {
     &--normal {
       margin-right: 10px;
     }
+
+    .van-loading {
+      margin: 0 18px;
+    }
   }
 
   .van-doc-demo-block {

docs/demos/views/loading.vue

@@ -1,23 +1,18 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-loading type="circle" color="black" />
-      <van-loading type="circle" color="white" />
+      <van-loading color="black" />
+      <van-loading color="white" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-loading type="gradient-circle" color="black" />
-      <van-loading type="gradient-circle" color="white" />
-    </demo-block>
-
-    <demo-block :title="$t('title3')">
       <van-loading type="spinner" color="black" />
       <van-loading type="spinner" color="white" />
     </demo-block>
 
-    <demo-block :title="$t('title4')">
-      <van-loading type="circular" color="black" />
-      <van-loading type="circular" color="white" />
+    <demo-block :title="$t('title3')">
+      <van-loading type="circle" color="black" />
+      <van-loading type="circle" color="white" />
     </demo-block>
   </demo-section>
 </template>
@@ -26,16 +21,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      title1: '单色圆环',
-      title2: '渐变色圆环',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
     },
     'en-US': {
-      title1: 'Solid Circle',
-      title2: 'Gradient Circle',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
     }
   }
 };

docs/demos/views/toast.vue

@@ -23,6 +23,7 @@
 export default {
   i18n: {
     'zh-CN': {
+      loading: '加载中',
       title1: '文字提示',
       title2: '加载提示',
       title3: '成功/失败提示',
@@ -52,7 +53,7 @@ export default {
     },
 
     showLoadingToast() {
-      Toast.loading({ mask: true });
+      Toast.loading({ mask: true, message: this.$t('loading') + '...' });
     },
 
     showSuccessToast() {

docs/markdown/en-US/loading.md

@@ -9,18 +9,11 @@ Vue.use(Loading);
 
 ### Usage
 
-#### Solid Circle
+#### Circular
 
 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### Gradient Circle
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```
 
 #### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```
 
-#### Circular
+#### Circle
 
 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```
 
 ### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | color | Color | `String` | `black` | `black` `white` |
-| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
+| type | Type | `String` | `circular` | `spinner` `circle` |
 | size | Size | `String` | `30px` | - |

docs/markdown/en-US/toast.md

@@ -18,7 +18,10 @@ Toast('Some messages');
 #### Loading
 
 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: 'Loading...'
+});
 ```
 
 

docs/markdown/zh-CN/loading.md

@@ -9,18 +9,11 @@ Vue.use(Loading);
 
 ### 代码演示
 
-#### 单色圆环
+#### Circular
 
 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### 渐变色圆环
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```
 
 #### Spinner
@@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```
 
-#### Circular
+#### Circle
 
 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```
 
 ### API
@@ -42,5 +35,5 @@ Vue.use(Loading);
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | color | 颜色 | `String` | `black` | `black` `white` |
-| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
+| type | 类型 | `String` | `circular` | `spinner` `circle` |
 | size | 大小 | `String` | `30px` | - |

docs/markdown/zh-CN/toast.md

@@ -18,7 +18,10 @@ Toast('我是提示文案，建议不超过十五字~');
 #### 加载提示
 
 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: '加载中...'
+});
 ```