support align center and fix compatibility for IE

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

@@ -9,17 +9,42 @@
 ````jsx
 
 var Spin = antd.Spin;
+var Button = antd.Button;
 var container = document.getElementById('components-spin-demo-full-page-load');
 
-var pageStyle = {
-  paddingBottom: '60px',
-  paddingTop: '60px',
-  textAlign: 'center'
-}
+var App = React.createClass({
+  getInitialState() {
+    return {
+      loading: false
+    };
+  },
+  enterLoading() {
+    this.setState({
+      loading: !this.state.loading
+    });
+  },
+  render() {
+    return <div>
+      <Spin loading={this.state.loading} size="large">
+        <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} />switch spin loading
+    </div>;
+  }
+});
 
-ReactDOM.render(
-  <div style={ pageStyle }>
-    <Spin size="large" />
-  </div>, container);
+ReactDOM.render(<App />, container);
 
-````
+````
+<style>
+  .inner-content {
+    height: 300px;
+    padding-bottom: 60px;
+    padding-top: 60px;
+    text-align: center;
+  }
+</style>

components/spin/demo/page-element.md

@@ -10,21 +10,22 @@
 var Spin = antd.Spin;
 var container = document.getElementById('components-spin-demo-page-element');
 
-var divStyle = {
-  textAlign: 'center',
-  width: '100%',
-  backgroundColor: 'rgba(0,0,0,0.05)',
-    borderRadius: '4px',
-    marginBottom: '20px',
-    padding: '.66em 1.5em',
-    margin: '20px 0'
-}
-
 ReactDOM.render(
   <div>
-    <div style={ divStyle }>
+    <div className="example">
       <Spin size="small" />
     </div>
   </div>, container);
 
-````
+````
+<style>
+  .example {
+    text-align: center;
+    width: 100%;
+    background: rgba(0,0,0,0.05);
+    border-radius: 4px;
+    margin-bottom: 20px;
+    padding: 30px 50px;
+    margin: 20px 0;
+  }
+</style>

components/spin/index.jsx

@@ -1,40 +1,79 @@
 import React from 'react';
 import { classSet } from 'rc-util';
 
-let AntSpin = React.createClass({
+const AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'default'
+      size: 'default',
+      loading: false
     };
   },
 
   propTypes: {
+    loading: React.PropTypes.bool,
     className: React.PropTypes.string,
     size: React.PropTypes.oneOf(['small', 'default', 'large'])
   },
 
+  getIEVersion() {
+    let ua = navigator.userAgent.toLowerCase();
+    return ua.match(/msie ([\d.]+)/)[1];
+  },
+
+  isNestedPattern() {
+    return this.props.children ? true : false;
+  },
+
   render() {
     const prefix = 'ant-spin';
-    const {size, className, ...others} = this.props;
+    const nestedStatus = this.isNestedPattern();
+    const { loading, className, size, ...others } = this.props;
     const sizeCls = ({
       'large': 'lg',
       'small': 'sm'
     })[size] || '';
 
-    let componentClassName = classSet({
+    let loadingClassName = classSet({
+      'ant-spin-nested-loading': nestedStatus && !!loading,
+      'ant-spin-not-nested-loading': !nestedStatus
+    });
+    let spinClassName = classSet({
       'ant-spin': true,
-      [`${prefix}-${sizeCls}`]: sizeCls,
       [className]: !!className
     });
 
+    let spinEl;
+    let _IE = this.getIEVersion();
+    if (_IE === '8.0' || _IE === '9.0') {
+      // IE 8 or IE 9
+      spinEl = <div className={ spinClassName }>加载中...</div>;
+    }else {
+      let spinWrapperClassName = classSet({
+        'ant-spin-wrapper': true,
+        [`${prefix}-${sizeCls}`]: sizeCls
+      });
+      spinEl = (<div className={ spinWrapperClassName }>
+                  <div className={ spinClassName }>
+                    <span className="ant-spin-dot ant-spin-dot-first" />
+                    <span className="ant-spin-dot ant-spin-dot-second" />
+                    <span className="ant-spin-dot ant-spin-dot-third" />
+                  </div>
+                </div>);
+    }
+
+    let spinContainerEl = nestedStatus ?
+        <div className="ant-spin-container">
+          { this.props.children }
+        </div> : null;
+
     return (
-      <div {...this.props} className={ componentClassName }>
-        <span className="ant-spin-dot ant-spin-dot-first" />
-        <span className="ant-spin-dot ant-spin-dot-second" />
-        <span className="ant-spin-dot ant-spin-dot-third" />
+      <div {...this.props} className={ loadingClassName }>
+        { spinEl }
+        { spinContainerEl }
       </div>
     );
   }
 });
 
 export default AntSpin;
+

components/spin/index.md

@@ -16,4 +16,5 @@
 
 | 参数       | 类型            | 默认值       |说明           |
 |-----------|----------------|-------------|--------------|
-| size        | enum      | default       | spin组件中点的大小，可选值为small default large
+| size        | enum      | default       | spin组件中点的大小，可选值为small default large
+| loading     | boolean      | false         | 当组件嵌套使用时，可以通过设置loading属性，调出spin的loading状态, 单独使用组件无需设置

style/components/spin.less

@@ -6,12 +6,47 @@
 // ------------------------------
 
 .@{spin-prefix-cls} {
-  display: inline-block;
-  font-size: @spin-dot-size;
-  position: relative;
+  color: @primary-color;
+  display: none;
+  font-size: 1em;
   text-align: center;
   vertical-align: middle;
 
+  &-nested-loading {
+    position: relative;
+  }
+
+  &-nested-loading > &-wrapper{
+    font-size: @spin-dot-size;
+  }
+
+  &-nested-loading .ant-spin  {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -0.75em;
+    margin-left: -2.5em;
+    z-index: 4;
+  }
+
+  &-nested-loading > &-container {
+    -webkit-filter: blur(10px); /* Chrome, Opera */
+    -moz-filter: blur(10px);
+    -ms-filter: blur(10px);    
+    filter: blur(10px);
+    
+    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
+    z-index: 19;
+  }
+
+  &-not-nested-loading > &-wrapper {
+    font-size: @spin-dot-size;
+  }
+  &-not-nested-loading .ant-spin{
+    display: inline-block;
+  }
+
   // dots
   // ------------------------------
 
@@ -36,12 +71,12 @@
   // ------------------------------
 
   // small
-  &-sm {
+  &-nested-loading > &-sm, &-not-nested-loading > &-sm {
     font-size: @spin-dot-size-sm;
   }
 
   // large
-  &-lg {
+  &-nested-loading > &-lg, &-not-nested-loading > &-lg {
     font-size: @spin-dot-size-lg;
   }
 }
@@ -51,3 +86,11 @@
   0%, 80%, 100% { opacity: 0; }
   40% { opacity: 1; }
 }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+*/
+  .ant-spin-nested-loading > .ant-spin-container {
+    background: #fff;
+    opacity: 0.5;
+  }
+}

style/components/table.less

@@ -82,7 +82,8 @@
   &-loading {
     position: relative;
     .@{table-prefix-cls}-body {
-      opacity: 0.6;
+      background: #fff;
+      opacity: 0.5;
     }
     .@{table-prefix-cls}-spin-holder {
       height: 20px;