use animation judge function, and remove the loading attribute

components/spin/demo/full-page-load.md

@@ -21,16 +21,19 @@ let App = React.createClass({
     });
   },
   render() {
-    return <div>
-      <Spin loading={this.state.loading} size="large">
+    let childEl = (
         <div className="inner-content">
           <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" width="200px" height="200px" />
           <div>我是一张图片</div>
         </div>
-      </Spin>
-     
-      <Button type="primary" onClick={this.enterLoading}>点击切换</Button>
-    </div>;
+    );
+    let spinEl = this.state.loading ? (<Spin size="large"> { childEl } </Spin>) : childEl;
+    return (
+      <div>
+        { spinEl }
+        <Button type="primary" onClick={this.enterLoading}>点击切换</Button>
+      </div>
+    );
   }
 });
 

components/spin/index.jsx

@@ -1,26 +1,18 @@
 import React from 'react';
 import { classSet } from 'rc-util';
-
+import { isCssAnimationSupported } from 'css-animation';
 const AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'default',
-      loading: false
+      size: 'default'
     };
   },
 
   propTypes: {
-    loading: React.PropTypes.bool,
     className: React.PropTypes.string,
     size: React.PropTypes.oneOf(['small', 'default', 'large'])
   },
 
-  getIEVersion() {
-    let ua = navigator.userAgent.toLowerCase();
-    let s = ua.match(/msie ([\d.]+)/);
-    return s ? s[1] : false;
-  },
-
   isNestedPattern() {
     return this.props.children ? true : false;
   },
@@ -28,15 +20,14 @@ const AntSpin = React.createClass({
   render() {
     const prefix = 'ant-spin';
     const nestedStatus = this.isNestedPattern();
-    const { loading, className, size, ...others } = this.props;
+    const { className, size, ...others } = this.props;
     const sizeCls = ({
       'large': 'lg',
       'small': 'sm'
     })[size] || '';
 
     let loadingClassName = classSet({
-      'ant-spin-nested-loading': nestedStatus && !!loading,
-      'ant-spin-not-nested-loading': !nestedStatus
+      'ant-spin-nested-loading': nestedStatus
     });
     let spinClassName = classSet({
       'ant-spin': true,
@@ -44,9 +35,8 @@ const AntSpin = React.createClass({
     });
 
     let spinEl;
-    let _IE = this.getIEVersion();
-    if (_IE === '8.0' || _IE === '9.0') {
-      // IE 8 or IE 9
+    if (!isCssAnimationSupported) {
+      // not support for animation, just use text instead
       spinEl = <div className={ spinClassName }>加载中...</div>;
     }else {
       let spinWrapperClassName = classSet({

style/components/spin.less

@@ -7,7 +7,7 @@
 
 .@{spin-prefix-cls} {
   color: @primary-color;
-  display: none;
+  display: inline-block;
   font-size: 1em;
   text-align: center;
   vertical-align: middle;
@@ -16,12 +16,11 @@
     position: relative;
   }
 
-  &-nested-loading > &-wrapper{
-    font-size: @spin-dot-size;
+  &-wrapper {
+    font-size: @spin-dot-size;  
   }
 
-  &-nested-loading .ant-spin  {
-    display: inline-block;
+  &-nested-loading .ant-spin {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -40,13 +39,6 @@
     z-index: 19;
   }
 
-  &-not-nested-loading > &-wrapper {
-    font-size: @spin-dot-size;
-  }
-  &-not-nested-loading .ant-spin{
-    display: inline-block;
-  }
-
   // dots
   // ------------------------------