refactor(Loading): rewrite wxml and style (#2215)

example/pages/loading/index.wxml

@@ -1,28 +1,17 @@
-<demo-block title="Circular" padding>
-  <van-loading custom-class="loading" />
-  <van-loading custom-class="loading shadow" color="#fff" />
+<demo-block title="加载类型" padding>
+  <van-loading custom-class="demo-loading" />
+  <van-loading custom-class="demo-loading" type="spinner" />
 </demo-block>
 
-<demo-block title="Spinner" padding>
-  <van-loading custom-class="loading" type="spinner" />
-  <van-loading custom-class="loading shadow" type="spinner" color="#fff" />
+<demo-block title="自定义颜色" padding>
+  <van-loading custom-class="demo-loading" color="#1989fa" />
+  <van-loading custom-class="demo-loading" type="spinner" color="#1989fa" />
 </demo-block>
 
 <demo-block title="加载文案" padding>
-  <van-loading custom-class="loading">
-    加载中……
-  </van-loading>
+  <van-loading custom-class="demo-loading" size="24px">加载中...</van-loading>
 </demo-block>
 
-<demo-block title="加载文案大小调整" padding>
-  <van-loading custom-class="loading" text-size="12" vertical>
-    加载中……
-  </van-loading>
-</demo-block>
-
-
-<demo-block title="加载文案竖直排列" padding>
-  <van-loading custom-class="loading" vertical>
-    加载中……
-  </van-loading>
+<demo-block title="垂直排列" padding>
+  <van-loading custom-class="demo-loading" size="24px" vertical>加载中...</van-loading>
 </demo-block>

example/pages/loading/index.wxss

@@ -1,9 +1,3 @@
-.loading {
-  margin-right: 20px;
-}
-
-.shadow {
-  padding: 10px;
-  border-radius: 3px;
-  background-color: rgba(0, 0, 0, .5);
+.demo-loading {
+  margin: 4px 16px 4px 0;
 }

packages/common/style/var.less

@@ -202,6 +202,14 @@
 @info-dot-size: 8px;
 @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 
+// Loading
+@loading-text-color: @gray-dark;
+@loading-text-font-size: @font-size-md;
+@loading-text-line-height: 20px;
+@loading-spinner-color: @gray;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: .8s;
+
 // NavBar
 @nav-bar-height: 44px;
 

packages/loading/README.md

@@ -12,18 +12,30 @@
 
 ## 代码演示
 
-### Circular
+### 加载类型
 
 ```html
 <van-loading />
-<van-loading color="#fff" />
+<van-loading type="spinner" />
 ```
 
-### Spinner
+### 自定义颜色
 
 ```html
-<van-loading type="spinner" />
-<van-loading type="spinner" color="#fff" />
+<van-loading color="#1989fa" />
+<van-loading type="spinner" color="#1989fa" />
+```
+
+### 加载文案
+
+```html
+<van-loading size="24px">加载中...</van-loading>
+```
+
+### 垂直排列
+
+```html
+<van-loading size="24px" vertical>加载中...</van-loading>
 ```
 
 ## API
@@ -35,9 +47,8 @@
 | color | 颜色 | *string* | `#c9c9c9` | - |
 | type | 类型，可选值为 `spinner` | *string* | `circular` | - |
 | size | 加载图标大小，默认单位为 `px` | *string \| number* | `30px` | - |
-| text-size | 文字大小，默认单位为为 `px` | *string \| number* | `14px` | 1.0 |
-| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | 1.0 |
-
+| text-size | 文字大小，默认单位为为 `px` | *string \| number* | `14px` | 1.0.0 |
+| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | 1.0.0 |
 
 ### Slots 
 

packages/loading/index.less

@@ -1,48 +1,48 @@
 @import '../common/style/var.less';
 
 .van-loading {
-  &__wrapper {
-    position: relative;
-    z-index: 0;
-    display: inline-block;
-    line-height: 0;
-  }
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
-  &--vertical {
-    flex-direction: column;
-  }
+  color: @loading-spinner-color;
 
   &__spinner {
     position: relative;
-    z-index: -1;
-    display: inline-block;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    animation: van-rotate 0.8s linear infinite;
+    width: @loading-spinner-size;
+    // compatible for 0.x, users may set width or height in root element
+    max-width: 100%;
+    height: @loading-spinner-size;
+    max-height: 100%;
+    animation: van-rotate @loading-spinner-animation-duration linear infinite;
 
     &--spinner {
       animation-timing-function: steps(12);
     }
 
     &--circular {
-      border: 1px solid;
-      border-color: transparent;
+      border: 1px solid transparent;
       border-top-color: currentColor;
       border-radius: 100%;
     }
   }
 
   &__text {
-    margin-left: 8px;
-    color: #969799;
+    margin-left: @padding-xs;
+    color: @loading-text-color;
+    font-size: @loading-text-font-size;
+    line-height: @loading-text-line-height;
 
-    &--vertical {
-      margin: 8px 0 0;
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    .van-loading__text {
+      margin: @padding-xs 0 0;
     }
   }
 

packages/loading/index.ts

@@ -3,6 +3,7 @@ import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
+    vertical: Boolean,
     size: {
       type: String,
       observer: 'setSizeWithUnit'
@@ -18,8 +19,7 @@ VantComponent({
     textSize: {
       type: String,
       observer: 'setTextSizeWithUnit'
-    },
-    vertical: Boolean
+    }
   },
 
   data: {

packages/loading/index.wxml

@@ -1,24 +1,19 @@
-<view class="van-loading {{vertical ? 'van-loading--vertical' : ''}}">
+<view class="custom-class van-loading van-loading--{{ type }} {{ vertical ? 'van-loading--vertical' : '' }}">
   <view
-    class="van-loading__wrapper custom-class"
-    style="width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
+    class="van-loading__spinner van-loading__spinner--{{ type }}"
+    style="color: {{ color }}; width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
   >
     <view
-      class="van-loading__spinner van-loading__spinner--{{ type }}"
-      style="color: {{ color }};"
-    >
-      <view
-        wx:if="{{ type === 'spinner' }}"
-        wx:for="item in 12"
-        wx:key="index"
-        class="van-loading__dot"
-      />
-    </view>
+      wx:if="{{ type === 'spinner' }}"
+      wx:for="item in 12"
+      wx:key="index"
+      class="van-loading__dot"
+    />
   </view>
   <view 
-    style="font-size: {{textSizeWithUnit}};" 
+    style="font-size: {{ textSizeWithUnit }};" 
     class="van-loading__text {{vertical ? 'van-loading__text--vertical' : ''}}"
   >
     <slot />
   </view>
-</view>
+</view>