[refactor] Loading 组件升级 (#178)

* refactor: loading

* fix: modify api

example/app.json

@@ -12,6 +12,7 @@
     "pages/helper/index",
     "pages/icon/index",
     "pages/layout/index",
+    "pages/loading/index",
     "pages/noticebar/index",
     "pages/panel/index",
     "pages/popup/index",

example/pages/dashboard/config.js

@@ -26,6 +26,9 @@ export default {
       }, {
         name: 'Layout 布局',
         path: '/pages/layout/index'
+      }, {
+        name: 'loading 加载',
+        path: '/pages/loading/index'
       }, {
         name: 'Noticebar 通告栏',
         path: '/pages/noticebar/index'

example/pages/loading/index.js

@@ -0,0 +1 @@
+Page({})

example/pages/loading/index.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "loading 加载",
+  "usingComponents": {
+    "zan-loading": "../../dist/loading/index"
+  }
+}

example/pages/loading/index.wxml

@@ -0,0 +1,21 @@
+<view class="container">
+
+  <view class="doc-title zan-hairline--bottom">LOADING</view>
+
+  <view class="zan-panel-title">circle</view>
+  <view class="loading-example zan-panel">
+    <zan-loading type="circle"></zan-loading>
+    <zan-loading type="circle" color="black"></zan-loading>
+  </view>
+  <view class="zan-panel-title">spinner</view>
+  <view class="loading-example zan-panel">
+    <zan-loading type="spinner"></zan-loading>
+    <zan-loading type="spinner" color="black"></zan-loading>
+  </view>
+  <view class="zan-panel-title">dot</view>
+  <view class="zan-panel loading-example no-flex">
+    <zan-loading type="dot"></zan-loading>
+    <zan-loading type="dot" color="black"></zan-loading>
+  </view>
+
+</view>

example/pages/loading/index.wxss

@@ -0,0 +1,14 @@
+.container {
+  background: #f0f0f0;  
+}
+.loading-example {
+  display: flex;
+  flex-direction: row;
+  background: transparent;
+}
+.loading-example zan-loading {
+  flex: 1;
+}
+.no-flex {
+  display: block;
+}

packages/loading/README.md

@@ -0,0 +1,27 @@
+## Loading 加载
+
+### 属性
+
+| 名称    | 类型            | 是否必须 | 默认  | 描述              |
+| ------- | --------------- | -------- | ----- | ----------------- |
+| type | String         | 否       | circle | loading 类型，可支持 circle，spinner，dot |
+| color | String         | 否       | 无 | 可选值 black  |
+| use | String，Number | 否       | 1 | 选择每种 Loading 类型的样式      |
+
+### 代码演示
+
+```json
+  {
+    ...
+    "usingComponents": {
+      "zan-loading": "../../dist/loading/index"
+    }
+    ...
+  }
+```
+
+```html
+  <zan-loading type="circle"></zan-loading>
+  <zan-loading type="spinner" color="black"></zan-loading>
+  <zan-loading type="dot"></zan-loading>
+```

packages/loading/index.js

@@ -0,0 +1,11 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'circle'
+    },
+    color: {
+      type: String
+    }
+  }
+})

packages/loading/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/loading/index.pcss

@@ -0,0 +1,175 @@
+$spinners: 12;
+
+.loading.inline {
+  position: relative;
+  margin: 15px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  
+  & .circle {
+    display: inline-block;
+    height: 24px;
+    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 {
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    animation: loading 2s linear infinite;  
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      border: 3px solid transparent;
+      box-sizing: border-box;  
+      animation: circular 2s ease infinite;
+    }
+  }
+
+  & .spinner {
+    width: 30px;
+    height: 30px;
+    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 {
+        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%;
+    display: block;
+    width: 2px;
+    border-radius: 2px;
+    margin: 0 auto;
+  }
+}
+
+.loading.block {
+  & .dot-spinner {
+    margin: 15px 15px;
+    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 {
+    background: #c9c9c9;
+  }
+}
+
+
+@keyframes dot-spinner {
+  40% {
+    left: calc(50% - 15px);
+  }
+
+  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

@@ -0,0 +1,18 @@
+<view class="loading {{color}} {{type === 'dot' ? 'block' : 'inline'}}">
+  <view wx:if="{{type === 'circle'}}" class="circle"></view>
+  <view wx:if="{{type === 'circular'}}" class="circular"></view>
+  <view wx:if="{{type === 'spinner' || type === 'dot'}}" class="{{ type === 'dot' ? 'dot-spinner' : 'spinner'}}">
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+    <view></view>
+  </view>
+</view>