improve button loading animation

components/button/button.jsx

@@ -28,6 +28,7 @@ export default class Button extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-btn',
     onClick() {},
+    loading: false,
   }
 
   static propTypes = {
@@ -58,7 +59,7 @@ export default class Button extends React.Component {
 
   render() {
     const props = this.props;
-    const { type, shape, size, className, htmlType, children, icon, prefixCls, ...others } = props;
+    const { type, shape, size, className, htmlType, children, icon, loading, prefixCls, ...others } = props;
 
     // large => lg
     // small => sm
@@ -73,10 +74,12 @@ export default class Button extends React.Component {
       [`${prefixCls}-${shape}`]: shape,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && icon,
-      [`${prefixCls}-loading`]: ('loading' in props && props.loading !== false),
+      [`${prefixCls}-loading`]: loading,
       [className]: className,
     });
 
+    const iconType = loading ? 'loading' : icon;
+
     const kids = React.Children.map(children, insertSpace);
 
     return (
@@ -84,7 +87,7 @@ export default class Button extends React.Component {
         type={htmlType || 'button'}
         className={classes}
         onClick={this.handleClick}>
-        {icon ? <Icon type={icon} /> : null}{kids}
+        {iconType ? <Icon type={iconType} /> : null}{kids}
       </button>
     );
   }

components/button/demo/loading.md

@@ -6,7 +6,7 @@ title: 加载中
 添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
 
 ````jsx
-import { Button, Icon } from 'antd';
+import { Button } from 'antd';
 
 const App = React.createClass({
   getInitialState() {
@@ -37,8 +37,8 @@ const App = React.createClass({
         <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
           点击变加载
         </Button>
-        <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
-          <Icon type="poweroff" />点击变加载
+        <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
+          点击变加载
         </Button>
       </div>
     );

style/components/button.less

@@ -59,28 +59,16 @@
     padding-left: 29px;
     pointer-events: none;
     opacity: 0.75;
-    &:after {
-      .animation(loadingCircle 1s infinite linear);
-      height: 12px;
-      line-height: 12px;
-      left: 10px;
-      top: 50%;
-      margin-top: -6px;
-      opacity: 1;
-      visibility: visible;
-    }
-    > .anticon {
-      display: none;
-      & + span {
-        margin-left: 0;
-      }
+    .anticon {
+      margin-left: -14px;
+      .transition(all .3s @ease-in-out);
     }
   }
 
   &-sm&-loading {
     padding-left: 24px;
-    &:after {
-      left: 7px;
+    .anticon {
+      margin-left: -17px;
     }
   }