style: init done

Author: KuangPF

example/pages/loading-custom/index.wxml

@@ -1,3 +1,3 @@
-<demo-block title="Circular" padding>
-  
+<demo-block title="Loading Component" padding>
+  <mp-loading></mp-loading>
 </demo-block>

src/mp-loading/index.less

@@ -0,0 +1,55 @@
+.spin-dot-wrap {
+  /* position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%); */
+  .spin-dot-wrap-rotate {
+    margin: 0 auto;
+    height: 100%;
+    transform: rotate(45deg);
+    animation: rotate 1.2s infinite linear;
+    .spin-dot-item {
+      position: absolute;
+      border-radius: 100%;
+      opacity: 0.3;
+      transform: scale(0.75);
+      animation: spinMove 0.3s infinite linear alternate;
+      &:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+      &:nth-child(2) {
+        top: 0;
+        right: 0;
+        animation-delay: 0.4s;
+      }
+      &:nth-child(3) {
+        bottom: 0;
+        left: 0;
+        animation-delay: 0.8s;
+      }
+      &:nth-child(4) {
+        right: 0;
+        bottom: 0;
+        animation-delay: 1.2s;
+      }
+    }
+  }
+  .spin-tip {
+    margin-top: 6px;
+    text-align: center;
+    font-size: 14px;
+  }
+}
+@keyframes spinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}

src/mp-loading/index.ts

@@ -0,0 +1,12 @@
+Component({
+  properties: {
+    size: {
+      type: Number,
+      value: 30
+    },
+    color: {
+      type: String,
+      value: '#1890ff'
+    }
+  }
+})

src/mp-loading/index.wxml

@@ -1 +1,8 @@
-<view>ss</view>
+<View class='spin-dot-wrap'>
+  <View class='spin-dot-wrap-rotate' style="width: {{ size }}px; height: {{ size }}px">
+    <block wx:for="{{[1,2,3,4]}}" wx:key="{{item}}">
+      <View class='spin-dot-item' style="width: {{ size/2 - 2}}px; height: {{ size/2 - 2}}px ;background-color: {{color}};" />
+    </block>
+  </View>
+  <view class="spin-tip" style="color: {{color}}">加载中...</view>
+</View>

types/weapp.d.ts

@@ -0,0 +1,80 @@
+type BehaviorOptions = {
+  [key: string]: any & ThisType<any>
+};
+
+declare function Behavior(options: BehaviorOptions): void
+declare function Component(options: any): void
+
+declare namespace Weapp {
+  interface Component {
+    [key: string]: any
+    getRelationNodes(selector: string): any[]
+    setData(data: any, callback?: Function): void
+  }
+
+  interface FormField {
+    data: {
+      name: string
+      value: any
+    }
+  }
+
+  interface Target {
+    id: string
+    tagName: string
+    dataset: {
+      [key: string]: any
+    }
+  }
+
+  interface Event {
+    /**
+     * 代表事件的类型。
+     */
+    type: string
+    /**
+     * 页面打开到触发事件所经过的毫秒数。
+     */
+    timeStamp: number
+    /**
+     * 触发事件的源组件。
+     */
+    target: Target
+    /**
+     * 事件绑定的当前组件。
+     */
+    currentTarget: Target
+    /**
+     * 	额外的信息
+     */
+    detail: any
+  }
+
+  interface Touch {
+    /**
+     * 触摸点的标识符
+     */
+    identifier: number
+    /**
+     * 距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
+     */
+    pageX: number
+    /**
+     * 距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
+     */
+    pageY: number
+    /**
+     * 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴
+     */
+    clientX: number
+    /**
+     * 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴
+     */
+    clientY: number
+  }
+
+  interface TouchEvent extends Event {
+    touches: Array<Touch>
+    changedTouches: Array<Touch>
+  }
+}