Fix Button[shape="circle"] loading style, close #4875

components/button/__tests__/__snapshots__/demo.test.js.snap

@@ -351,6 +351,19 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
       Click me!
     </span>
   </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-circle ant-btn-loading"
+    type="button">
+    <i
+      class="anticon anticon-spin anticon-loading" />
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"
+    type="button">
+    <i
+      class="anticon anticon-spin anticon-loading" />
+  </button>
 </div>
 `;
 

components/button/demo/loading.md

@@ -45,6 +45,9 @@ const App = React.createClass({
         <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
           Click me!
         </Button>
+        <br />
+        <Button shape="circle" loading />
+        <Button type="primary" shape="circle" loading />
       </div>
     );
   },

components/button/style/index.less

@@ -78,7 +78,11 @@
     display: none;
   }
 
-  &&-loading {
+  &&-loading:before {
+    display: block;
+  }
+
+  &&-loading:not(&-circle):not(&-circle-outline) {
     padding-left: 29px;
     pointer-events: none;
     position: relative;
@@ -86,12 +90,9 @@
       margin-left: -14px;
       transition: all .3s @ease-in-out;
     }
-    &:before {
-      display: block;
-    }
   }
 
-  &-sm&-loading {
+  &-sm&-loading:not(&-circle):not(&-circle-outline) {
     padding-left: 24px;
     .@{iconfont-css-prefix} {
       margin-left: -17px;