[breaking change] Loading: rewrite

example/pages/button/index.wxml

@@ -23,7 +23,7 @@
   </demo-block>
 
   <demo-block title="加载状态">
-    <van-button loading custom-class="demo-margin-right" />
+    <van-button loading custom-class="demo-margin-right" loading-class="loading" />
-    <van-button loading type="primary" />
+    <van-button loading type="primary" loading-class="loading" />
   </demo-block>
 </demo-section>

example/pages/button/index.wxss

@@ -0,0 +1,3 @@
+.loading {
+  margin: 0 18px;
+}

example/pages/loading/index.json

@@ -1,6 +1,7 @@
 {
-  "navigationBarTitleText": "loading 加载",
+  "navigationBarTitleText": "Loading 加载",
   "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
     "van-loading": "../../dist/loading/index"
   }
 }

example/pages/loading/index.wxml

@@ -1,19 +1,9 @@
-<view class="container">
+<demo-block title="Circular">
+  <van-loading custom-class="loading" />
+  <van-loading custom-class="loading shadow" color="#fff" />
+</demo-block>
 
-  <view class="van-panel-title">circle</view>
+<demo-block title="Spinner">
-  <view class="loading-example van-panel">
+  <van-loading custom-class="loading" type="spinner" />
-    <van-loading type="circle"></van-loading>
+  <van-loading custom-class="loading shadow" type="spinner" color="#fff" />
-    <van-loading type="circle" color="black"></van-loading>
+</demo-block>
-  </view>
-  <view class="van-panel-title">spinner</view>
-  <view class="loading-example van-panel">
-    <van-loading type="spinner"></van-loading>
-    <van-loading type="spinner" color="black"></van-loading>
-  </view>
-  <view class="van-panel-title">dot</view>
-  <view class="van-panel loading-example no-flex">
-    <van-loading type="dot"></van-loading>
-    <van-loading type="dot" color="black"></van-loading>
-  </view>
-
-</view>

example/pages/loading/index.wxss

@@ -1,14 +1,9 @@
-.container {
+.loading {
-  background: #f0f0f0;  
+  margin-right: 20px;
 }
-.loading-example {
+
-  display: flex;
+.shadow {
-  flex-direction: row;
+  padding: 10px;
-  background: transparent;
+  border-radius: 3px;
-}
+  background-color: rgba(0, 0, 0, .5);
-.loading-example van-loading {
-  flex: 1;
-}
-.no-flex {
-  display: block;
 }

packages/button/README.md

@@ -72,6 +72,13 @@
 | send-message-img | sendMessageImg | `String` | 截图 |
 | show-message-card | 显示会话内消息卡片 | `String` | `false` |
 
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| loading-class | 加载图标样式类 |
+
 ### 事件
 
 | 事件名 | 说明 | 参数 |

packages/button/index.js

@@ -6,7 +6,10 @@ const observer = function () {
 };
 
 Component({
-  externalClasses: ['custom-class'],
+  externalClasses: [
+    'custom-class',
+    'loading-class'
+  ],
 
   behaviors: [nativeBehaviors],
 

packages/button/index.pcss

@@ -4,8 +4,8 @@
   position: relative;
   padding: 0;
   display: inline-block;
-  height: 45px;
+  height: 44px;
-  line-height: 43px;
+  line-height: 42px;
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 16px;

packages/button/index.wxml

@@ -20,6 +20,11 @@
   binderror="binderror"
   bindopensetting="bindopensetting"
 >
-  <van-loading wx:if="{{ loading }}" color="{{ type === 'default' ? 'black' : 'white' }}" />
+  <van-loading
+    wx:if="{{ loading }}"
+    size="20px"
+    custom-class="loading-class"
+    color="{{ type === 'default' ? '#c9c9c9' : '#fff' }}"
+  />
   <slot></slot>
 </button>

packages/loading/README.md

@@ -1,25 +1,40 @@
 ## Loading 加载
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
-  {
+"usingComponents": {
-    "usingComponents": {
   "van-loading": "path/to/vant-weapp/dist/loading/index"
-    }
+}
-  }
 ```
 
-在页面上直接使用 van-loading 标签即可
+### 代码演示
+
+#### Circular
+
 ```html
-  <van-loading type="circle"></van-loading>
+<van-loading />
-  <van-loading type="spinner" color="black"></van-loading>
+<van-loading color="#fff" />
-  <van-loading type="dot"></van-loading>
 ```
 
-### 具体参数
+#### Spinner
-| 名称    | 类型            | 是否必须 | 默认  | 描述              |
+
-| ------- | --------------- | -------- | ----- | ----------------- |
+```html
-| type | String         | 否       | circle | loading 类型，可支持 circle，spinner，dot |
+<van-loading type="spinner" />
-| color | String         | 否       | 无 | 可选值 black  |
+<van-loading type="spinner" color="#fff" />
-| use | String，Number | 否       | 1 | 选择每种 Loading 类型的样式      |
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| color | 颜色 | `String` | `#c9c9c9` |
+| type | 类型，可选值为 `spinner` | `String` | `circular` |
+| size | 大小 | `String` | `30px` |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |

packages/loading/index.js

@@ -1,11 +1,18 @@
 Component({
+  externalClasses: ['custom-class'],
+
   properties: {
+    size: {
+      type: String,
+      value: '30px'
+    },
     type: {
       type: String,
-      value: 'circle'
+      value: 'circular'
     },
     color: {
-      type: String
+      type: String,
+      value: '#c9c9c9'
     }
   }
 });

packages/loading/index.pcss

@@ -1,175 +1,66 @@
-$spinners: 12;
+@import '../common/var.pcss';
 
-.loading.inline {
+.van-loading {
+  z-index: 0;
+  font-size: 0;
+  line-height: 0;
   position: relative;
-  margin: 15px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  
-  & .circle {
   display: inline-block;
-    height: 24px;
+  vertical-align: middle;
-    width: 24px;
-    border-radius: 100%;
-    border: 3px solid transparent;
-    box-sizing: border-box;
-    border-color: rgba(0, 0, 0, .1);
-    border-top-color: rgba(255, 255, 255, .7);
-    animation: loading 1s linear infinite;
-  }
-  &.black .circle {
-    border-color: #c9c9c9;
-    border-top-color: #666;
-  } 
 
-  & .circular {
+  &__spinner {
-    display: inline-block;
+    z-index: -1;
-    height: 24px;
-    width: 24px;
-    animation: loading 2s linear infinite;  
-
-    &::after {
-      content: '';
-      display: block;
     width: 100%;
     height: 100%;
-      border-radius: 100%;
+    position: relative;
-      border: 3px solid transparent;
+    display: inline-block;
     box-sizing: border-box;
-      animation: circular 2s ease infinite;
+    animation: van-rotate 0.8s linear infinite;
+
+    &--spinner {
+      animation-timing-function: steps(12);
+    }
+
+    &--circular {
+      border: 1px solid;
+      border-radius: 100%;
+      border-color: currentColor;
+      border-top-color: transparent;
     }
   }
 
-  & .spinner {
+  &__dot {
-    width: 30px;
+    top: 0;
-    height: 30px;
+    left: 0;
-    display: inline-block;
-    position: relative;
-    animation: loading 1s linear infinite;  
-    animation-timing-function: steps(12);
-    & view {
     width: 100%;
     height: 100%;
     position: absolute;
-      text-align: center;
-      top: 0;
-      left: 0;
 
-      &::after {
+    &::before {
-        content: '';
-        background: #fff;
-        height: 25%;
-        display: block;
       width: 2px;
-        border-radius: 2px;
-        margin: 0 auto;
-      }
-
-      @for $i from 1 to $spinners {
-        &:nth-child($i) {
-          transform: rotate(calc($i * 30)deg);
-          opacity: calc(1 / ($spinners + 2) * ($spinners - $i));
-        }
-      }
-    }
-  }
-  &.black .spinner view::after {
-    content: '';
-    background: #c9c9c9;
       height: 25%;
+      content: ' ';
       display: block;
-    width: 2px;
-    border-radius: 2px;
       margin: 0 auto;
+      border-radius: 40%;
+      background-color: currentColor;
+    }
   }
 }
 
-.loading.block {
+@keyframes van-rotate {
-  & .dot-spinner {
+  from {
-    margin: 15px 15px;
+    transform: rotate(0deg);
-    overflow: hidden;
-
-    & view {
-      width: 8px;
-      height: 8px;
-      border-radius: 8px;
-      background: #fff;
-      display: inline-block;
-      margin-left: 3px;
-      position: relative;
-      left: 0;
-
-      animation: dot-spinner 2s ease infinite;
-      @for $i from 1 to 6 {
-        &:nth-child($i) {
-          animation-delay: calc((6 - $i)/10)s;
-        }
-      }
-      @for $i from 6 to $spinners {
-        &:nth-child($i) {
-          display: none;
-        }
-      }
-    }
   }
 
-  &.black .dot-spinner view {
+  to {
-    background: #c9c9c9;
+    transform: rotate(360deg);
   }
 }
 
-
+@for $i from 1 to 12 {
-@keyframes dot-spinner {
+  .van-loading__dot:nth-of-type($i) {
-  40% {
+    opacity: calc(1 - (0.75 / 12) * ($i - 1));
-    left: calc(50% - 15px);
+    transform: rotate(calc($i * 30deg));
-  }
-
-  60% {
-    left: calc(50% - 15px);
-  }
-
-  100% {
-    left: 100%;
-  }
-}
-
-@keyframes circular {
-  0% {
-    border-color: #fff;
-  }
-  12% {
-    border-top-color: transparent;
-  }
-  25% {
-    border-right-color: transparent;
-  }
-  37% {
-    border-bottom-color: transparent;
-  }
-  50% {
-    border-left-color: transparent;
-  }
-  64% {
-    border-top-color: #fff
-  }
-  75% {
-    border-right-color: #fff;
-  }
-  87.5% {
-    border-bottom-color: #fff;
-  }
-  100% {
-    border-color: #fff;
-  }
-}
-
-@keyframes loading {
-  0% {
-    transform: rotate(0deg)
-  }
-
-  100% {
-    transform: rotate(360deg)
   }
 }

packages/loading/index.wxml

@@ -1,18 +1,16 @@
-<view class="loading {{color}} {{type === 'dot' ? 'block' : 'inline'}}">
+<view
-  <view wx:if="{{type === 'circle'}}" class="circle"></view>
+  class="van-loading custom-class"
-  <view wx:if="{{type === 'circular'}}" class="circular"></view>
+  style="width: {{ size }}; height: {{ size }}"
-  <view wx:if="{{type === 'spinner' || type === 'dot'}}" class="{{ type === 'dot' ? 'dot-spinner' : 'spinner'}}">
+>
-    <view></view>
+  <view
-    <view></view>
+    class="van-loading__spinner van-loading__spinner--{{ type }}"
-    <view></view>
+    style="color: {{ color }};"
-    <view></view>
+  >
-    <view></view>
+    <view
-    <view></view>
+      wx:if="{{ type === 'spinner' }}"
-    <view></view>
+      wx:for="item in 12"
-    <view></view>
+      wx:key="{{ index }}"
-    <view></view>
+      class="van-loading__dot"
-    <view></view>
+    />
-    <view></view>
-    <view></view>
   </view>
 </view>