Merge branch 'master' of github.com:ant-design/ant-design

components/spin/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { PropTypes } from 'react';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
+import Animate from 'rc-animate';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import splitObject from '../_util/splitObject';
 import omit from 'omit.js';
@@ -67,7 +68,6 @@ export default class Spin extends React.Component<SpinProps, any> {
       this.setState({ spinning });
     }
   }
-
   render() {
     const [{
       className, size, prefixCls, tip,
@@ -90,20 +90,33 @@ export default class Spin extends React.Component<SpinProps, any> {
     ]);
 
     const spinElement = (
-      <div {...divProps} className={spinClassName}>
-        <span className={`${prefixCls}-dot`} />
+      <div {...divProps} className={spinClassName} >
+        <span className={`${prefixCls}-dot`}>
+          <i />
+          <i />
+          <i />
+          <i />
+        </span>
         {tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
       </div>
     );
-
     if (this.isNestedPattern()) {
+      const containerClassName = classNames({
+        [`${prefixCls}-container`]: true,
+        [`${prefixCls}-filter`]: spinning,
+      });
       return (
-        <div {...divProps} className={spinning ? (`${prefixCls}-nested-loading`) : ''}>
-          {spinElement}
-          <div className={`${prefixCls}-container`}>
+        <Animate
+          {...divProps}
+          component="div"
+          className={`${prefixCls}-nested-loading`}
+          transitionName="fade"
+        >
+          {spinning && <div key="loading">{spinElement}</div>}
+          <div className={containerClassName} key="container">
             {this.props.children}
           </div>
-        </div>
+        </Animate>
       );
     }
     return spinElement;

components/spin/style/index.less

@@ -3,9 +3,9 @@
 
 @spin-prefix-cls: ~"@{ant-prefix}-spin";
 @spin-dot-default: #999;
-@spin-dot-size-sm: 12px;
+@spin-dot-size-sm: 14px;
 @spin-dot-size: 20px;
-@spin-dot-size-lg: 32px;
+@spin-dot-size-lg: 30px;
 
 .@{spin-prefix-cls} {
   color: @primary-color;
@@ -71,17 +71,16 @@
       padding-top: (@spin-dot-size-lg - @font-size-base) / 2;
     }
   }
-
   &-container {
-    transition: all 0.3s @ease-in-out-circ;
+    transition: all 0.3s @ease-in-out;
+    position: relative;
   }
 
-  &-nested-loading > &-container {
+  &-filter {
     opacity: 0.7;
     -webkit-filter: blur(1px);
     filter: blur(1px);
     filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; /* IE6~IE9 */
-    position: relative;
     &:after {
       content: '';
       position: absolute;
@@ -106,22 +105,38 @@
     position: relative;
     display: block;
     .square(@spin-dot-size);
-    &:before,
-    &:after {
-      content: '';
+    transform: rotate(45deg);
+    animation: antRotate 3.2s infinite linear;
+    i {
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
       background-color: @primary-color;
-      animation: antSpinBounce 2.2s infinite ease-in-out;
+      transform: scale(0.6);
       display: block;
       position: absolute;
-      opacity: 0.5;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-    &:after {
-      animation-delay: -1.1s;
+      opacity: 0.3;
+      animation: antSpinMove .8s infinite linear alternate;
+      transform-origin: 0 0;
+      &:nth-child(1) {
+        left: 0;
+        top: 0;
+      }
+      &:nth-child(2) {
+        right: 0;
+        top: 0;
+        animation-delay: 0.4s;
+      }
+      &:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        animation-delay: 0.8s;
+      }
+      &:nth-child(4) {
+        left: 0;
+        bottom: 0;
+        animation-delay: 1.2s;
+      }
     }
   }
 
@@ -130,11 +145,19 @@
   // small
   &-sm &-dot {
     .square(@spin-dot-size-sm);
+    i {
+      width: 6px;
+      height: 6px;
+    }
   }
 
   // large
   &-lg &-dot {
     .square(@spin-dot-size-lg);
+    i {
+      width: 12px;
+      height: 12px;
+    }
   }
 
   &&-show-text &-text {
@@ -142,16 +165,6 @@
   }
 }
 
-@keyframes antSpinBounce {
-  0%,
-  100% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1);
-  }
-}
-
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ */
   .@{ant-prefix}-spin-nested-loading > .@{ant-prefix}-spin-container {
@@ -159,3 +172,16 @@
     opacity: 0.5;
   }
 }
+
+@keyframes antSpinMove {
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes antRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}