diff --git a/components/spin/demo/full-page-load.md b/components/spin/demo/full-page-load.md
index e337ff69af..9d4e416c7a 100644
--- a/components/spin/demo/full-page-load.md
+++ b/components/spin/demo/full-page-load.md
@@ -21,16 +21,19 @@ let App = React.createClass({
});
},
render() {
- return
-
+ let childEl = (
我是一张图片
-
-
-
-
;
+ );
+ let spinEl = this.state.loading ? ( { childEl } ) : childEl;
+ return (
+
+ { spinEl }
+
+
+ );
}
});
diff --git a/components/spin/index.jsx b/components/spin/index.jsx
index 523f94bfc1..4f51d408b1 100644
--- a/components/spin/index.jsx
+++ b/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 = 加载中...
;
}else {
let spinWrapperClassName = classSet({
diff --git a/style/components/spin.less b/style/components/spin.less
index 016b0037c3..b5be79037a 100644
--- a/style/components/spin.less
+++ b/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
// ------------------------------