fix(button): 修复 loading

src/components/button/index.js

@@ -2,7 +2,7 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
-import AtIcon from '../icon/index'
+import AtLoading from '../loading/index'
 
 import './index.scss'
 
@@ -47,10 +47,10 @@ export default class AtButton extends Taro.Component {
 
     rootClassName.push(`at-button--${sizeClass}`, typeClass, circleClass, disabledClass)
     rootClassName = rootClassName.filter(str => str !== '')
-
+    const loadingColor = type === 'primary' ? '#fff' : '#6190E8'
     let component
     if (loading) {
-      component = <View className='at-button__icon'><AtIcon value='loading' size='20'></AtIcon></View>
+      component = <View className='at-button__icon'><AtLoading color={loadingColor} /></View>
       rootClassName.push('at-button--icon')
     }
 

src/components/button/index.scss

@@ -5,6 +5,8 @@ $at-button-height: 92px;
 $at-button-height-sm: 60px;
 
 .at-button {
+  display: flex;
+  justify-content: center;
   margin: 0 auto;
   padding: 0 $spacing-h-xl;
   height: $at-button-height;
@@ -46,10 +48,8 @@ $at-button-height-sm: 60px;
   }
 
   &__icon {
-    margin: 0 20px;
+    margin: 2PX 20px 0 20px;
     display: inline-block;
-    font-size: $font-size-base;
-    animation: loading-rotate 1s linear infinite;
   }
 
   &--circle {
@@ -71,15 +71,5 @@ $at-button-height-sm: 60px;
     height: $at-button-height-sm;
     font-size: $font-size-base;
     line-height: $at-button-height-sm - 2;
-
-    .at-button__icon {
-      font-size: $font-size-base;
-    }
-  }
-}
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(360deg);
   }
 }

src/components/loading/index.js

@@ -0,0 +1,23 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './index.scss'
+
+class AtLoading extends Taro.Component {
+  render () {
+    const style = {
+      'border': `1px solid ${this.props.color}`,
+      'border-color': `${this.props.color} transparent transparent transparent`
+    }
+    return (
+      <View className='at-loading'>
+        <View className='at-loading__ring' style={style}></View>
+        <View className='at-loading__ring' style={style}></View>
+        <View className='at-loading__ring' style={style}></View>
+      </View>
+    )
+  }
+}
+AtLoading.defaultProps = {
+  color: '#fff'
+}
+export default AtLoading

src/components/loading/index.scss

@@ -0,0 +1,41 @@
+.at-loading {
+  display: inline-block;
+  position: relative;
+  width: 18PX;
+  height: 18PX;
+
+  &__ring {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 18PX;
+    height: 18PX;
+    margin: 1PX;
+    border: 1PX solid #fff;
+    border-radius: 50%;
+    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
+}
+
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}