docs(Loading): add size prop demo

src/loading/README.md

@@ -25,6 +25,13 @@ Vue.use(Loading);
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+### Size
+
+```html
+<van-loading size="24" />
+<van-loading type="spinner" size="24px" />
+```
+
 ### Text
 
 ```html

src/loading/README.zh-CN.md

@@ -13,6 +13,8 @@ Vue.use(Loading);
 
 ### 加载类型
 
+通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner`
+
 ```html
 <van-loading />
 <van-loading type="spinner" />
@@ -20,19 +22,34 @@ Vue.use(Loading);
 
 ### 自定义颜色
 
+通过`color`属性设置加载图标的颜色
+
 ```html
 <van-loading color="#1989fa" />
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+### 自定义大小
+
+通过`size`属性设置加载图标的大小，默认单位为`px`
+
+```html
+<van-loading size="24" />
+<van-loading type="spinner" size="24px" />
+```
+
 ### 加载文案
 
+可以使用默认插槽在图标的右侧插入加载文案
+
 ```html
 <van-loading size="24px">加载中...</van-loading>
 ```
 
 ### 垂直排列
 
+设置`vertical`属性后，图标和文案会垂直排列
+
 ```html
 <van-loading size="24px" vertical>加载中...</van-loading>
 ```

src/loading/demo/index.vue

@@ -10,6 +10,11 @@
       <van-loading type="spinner" color="#1989fa" />
     </demo-block>
 
+    <demo-block :title="$t('size')">
+      <van-loading size="24" />
+      <van-loading type="spinner" size="24" />
+    </demo-block>
+
     <demo-block :title="$t('text')">
       <van-loading size="24px">
         {{ $t('loading') }}
@@ -29,14 +34,16 @@ export default {
   i18n: {
     'zh-CN': {
       type: '加载类型',
-      color: '自定义颜色',
       text: '加载文案',
+      size: '自定义大小',
+      color: '自定义颜色',
       vertical: '垂直排列',
     },
     'en-US': {
       type: 'Type',
-      color: 'Color',
       text: 'Text',
+      size: 'Size',
+      color: 'Color',
       vertical: 'Vertical',
     },
   },

src/loading/test/__snapshots__/demo.spec.js.snap

@@ -10,6 +10,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(25, 137, 250);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
+  <div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 24px; height: 24px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+  </div>
   <div>
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
       加载中...