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 // ------------------------------