New Spin design

components/spin/demo/size.md

@@ -11,10 +11,14 @@ import { Spin } from 'antd';
 ReactDOM.render(
   <div>
     <Spin size="small" />
-    <br />
     <Spin />
-    <br />
     <Spin size="large" />
   </div>
 , mountNode);
 ````
+
+<style>
+.ant-spin {
+  margin-right: 16px;
+}
+</style>

components/spin/index.jsx

@@ -77,9 +77,7 @@ export default class Spin extends React.Component {
 
     const spinElement = (
       <div {...restProps} className={spinClassName}>
-        <span className={`${prefixCls}-dot ${prefixCls}-dot-first`} />
-        <span className={`${prefixCls}-dot ${prefixCls}-dot-second`} />
-        <span className={`${prefixCls}-dot ${prefixCls}-dot-third`} />
+        <span className={`${prefixCls}-dot`} />
         <div className={`${prefixCls}-text`}>{tip || '加载中...'}</div>
       </div>
     );

components/spin/style/index.less

@@ -3,9 +3,9 @@
 
 @spin-prefix-cls: ant-spin;
 @spin-dot-default: #999;
-@spin-dot-size: 8px;
-@spin-dot-size-sm: @spin-dot-size / 2;
-@spin-dot-size-lg: @spin-dot-size * 2;
+@spin-dot-size-sm: 12px;
+@spin-dot-size: 20px;
+@spin-dot-size-lg: 32px;
 
 .@{spin-prefix-cls} {
   color: @primary-color;
@@ -15,7 +15,7 @@
   opacity: 0;
   position: absolute;
   visibility: hidden;
-  transition: opacity 0.3s @ease-in-out-circ;
+  transition: transform 0.3s @ease-in-out-circ;
   font-size: @font-size-base;
 
   &-spinning {
@@ -37,6 +37,9 @@
     z-index: 4;
     text-align: center;
     width: 100%;
+    &-dot {
+      display: inline-block;
+    }
   }
 
   &-container {
@@ -70,21 +73,26 @@
   // ------------------------------
 
   &-dot {
-    animation: antSpinPulse 1.2s infinite @ease-in-out-circ;
+    position: relative;
+    display: block;
     .square(@spin-dot-size);
-    border-radius: 50%;
-    display: inline-block;
-    background-color: @primary-color;
-  }
-  &-dot-second {
-    animation-delay: .2s;
-  }
-  &-dot-third {
-    animation-delay: .4s;
-  }
-
-  &-dot + &-dot {
-    margin-left: @spin-dot-size;
+    &:before,
+    &:after {
+      content: '';
+      border-radius: 50%;
+      background-color: @primary-color;
+      animation: antSpinBounce 2.2s infinite ease-in-out;
+      display: block;
+      position: absolute;
+      opacity: 0.5;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+    &:after {
+      animation-delay: -1.1s;
+    }
   }
 
   // Sizes
@@ -92,17 +100,11 @@
   // small
   &-sm &-dot {
     .square(@spin-dot-size-sm);
-    + & {
-      margin-left: @spin-dot-size-sm;
-    }
   }
 
   // large
   &-lg &-dot {
     .square(@spin-dot-size-lg);
-    + & {
-      margin-left: @spin-dot-size-lg;
-    }
   }
 
   &-text,
@@ -115,15 +117,13 @@
   }
 }
 
-// pulse
-@keyframes antSpinPulse {
+@keyframes antSpinBounce {
   0%,
-  80%,
   100% {
-    opacity: 0;
+    transform: scale(0);
   }
-  40% {
-    opacity: 1;
+  50% {
+    transform: scale(1);
   }
 }