diff --git a/components/spin/demo/full-page-load.md b/components/spin/demo/full-page-load.md
index 2d65f8b94d..0872a7527c 100644
--- a/components/spin/demo/full-page-load.md
+++ b/components/spin/demo/full-page-load.md
@@ -12,14 +12,14 @@ var Spin = antd.Spin;
 var container = document.getElementById('components-spin-demo-full-page-load');
 
 var pageStyle = {
-	paddingBottom: '60px',
-	paddingTop: '60px',
-	textAlign: 'center'
+  paddingBottom: '60px',
+  paddingTop: '60px',
+  textAlign: 'center'
 }
 
-React.render(
-	<div style={ pageStyle }>
-		<Spin size="lg" />
-	</div>, container);
+ReactDOM.render(
+  <div style={ pageStyle }>
+    <Spin size="large" type="primary" />
+  </div>, container);
 
 ````
\ No newline at end of file
diff --git a/components/spin/demo/page-element.md b/components/spin/demo/page-element.md
index 846e195b29..e02d8a4db3 100644
--- a/components/spin/demo/page-element.md
+++ b/components/spin/demo/page-element.md
@@ -11,26 +11,23 @@ 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)',
+  textAlign: 'center',
+  width: '100%',
+  backgroundColor: 'rgba(0,0,0,0.05)',
     borderRadius: '4px',
     marginBottom: '20px',
     padding: '.66em 1.5em',
     margin: '20px 0'
 }
 
-React.render(
-	<div>
-		<div style={ divStyle }>
-			<Spin size="md" />
-		</div>
-		<div style={ divStyle }>
-			<Spin size="md" type="primary" />
-		</div>
-		<div style={ divStyle }>
-			<Spin size="md" type="inverted" />
-		</div>
-	</div>, container);
+ReactDOM.render(
+  <div>
+    <div style={ divStyle }>
+      <Spin />
+    </div>
+    <div style={ divStyle }>
+      <Spin type="primary" />
+    </div>
+  </div>, container);
 
 ````
\ No newline at end of file
diff --git a/components/spin/index.jsx b/components/spin/index.jsx
index e36b8c8b75..1dd5530236 100644
--- a/components/spin/index.jsx
+++ b/components/spin/index.jsx
@@ -4,32 +4,37 @@ import { classSet } from 'rc-util';
 let AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'sm',
+      size: 'default',
       type: 'default'
     };
   },
 
   propTypes: {
     className: React.PropTypes.string,
-    size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-    type: React.PropTypes.oneOf(['default', 'primary', 'inverted'])
+    size: React.PropTypes.oneOf(['small', 'default', 'large']),
+    type: React.PropTypes.oneOf(['default', 'primary'])
   },
 
   render() {
-    const props = this.props;
+    const prefix = 'ant-spin';
+    const {type, size, className, ...others} = this.props;
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
 
-    let className = classSet({
-      spin: 1,
-      [`spin-${props.type}`]: 1,
-      [`spin-${props.size}`]: 1,
-      [props.className]: !!props.className
+    let componentClassName = classSet({
+      'ant-spin': true,
+      [`${prefix}-${type}`]: type,
+      [`${prefix}-${sizeCls}`]: sizeCls,
+      [className]: !!className
     });
 
     return (
-      <div {...this.props} className={ className }>
-        <span className="spin-dot spin-dot-first" />
-        <span className="spin-dot spin-dot-second" />
-        <span className="spin-dot spin-dot-third" />
+      <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>
     );
   }
diff --git a/components/spin/index.md b/components/spin/index.md
index 4f2036e97f..01b98bd148 100644
--- a/components/spin/index.md
+++ b/components/spin/index.md
@@ -15,6 +15,6 @@
 ## API
 
 | 参数       | 类型            | 默认值       |说明           |
-|------------|----------------|-------------|--------------|
-| size        | enum			| sm				| spin组件中点的大小，可选值为sm md lg
-| type        | enum			| default           | spin组件中点的而色值，可选值为default primary inverted
\ No newline at end of file
+|-----------|----------------|-------------|--------------|
+| size        | enum      | default       | spin组件中点的大小，可选值为large default small
+| type        | enum      | default       | spin组件中点的而色值，可选值为default primary
\ No newline at end of file
diff --git a/components/table/index.jsx b/components/table/index.jsx
index b2bed91dab..54eba5d4d0 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -600,7 +600,7 @@ let AntTable = React.createClass({
       let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
 
       spinEl = <div className={spinClass}>
-          <Spin size="md" type="primary"/>
+          <Spin type="primary"/>
         </div>;
 
       spinWrapperClass = ' ant-table-loading';
diff --git a/style/components/spin.less b/style/components/spin.less
index 6074b7fcf9..f37fa9e426 100644
--- a/style/components/spin.less
+++ b/style/components/spin.less
@@ -1,70 +1,64 @@
 @import "../mixins/index";
 
+@spin-prefix-cls: ant-spin;
+
 // root of component
 // ------------------------------
 
-.spin {
-	display: inline-block;
-	font-size: @spin-dot-size;
-	height: @spin-dot-size;
-	position: relative;
-	text-align: center;
-	vertical-align: middle;
-}
+.@{spin-prefix-cls} {
+  display: inline-block;
+  font-size: @spin-dot-size;
+  height: @spin-dot-size;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
 
-// dots
-// ------------------------------
+  // dots
+  // ------------------------------
+  
+  &-dot {
+    .animation(antSpinPulse 1s infinite ease-in-out);
+    .square(1em);
+    border-radius: 50%;
+    display: inline-block;
+    vertical-align: top;
+  }
+  &-dot-second {
+    .animation-delay(200ms);
+    margin-left: 1em;
+  }
+  &-dot-third {
+    .animation-delay(400ms);
+    margin-left: 1em;
+  }
 
-.spin-dot {
-	.animation(pulse 1s infinite ease-in-out);
-	.square(1em);
-	border-radius: 50%;
-	display: inline-block;
-	vertical-align: top;
-}
-&.spin-dot-second {
-	.animation-delay(200ms);
-	margin-left: 1em;
-}
-&.spin-dot-third {
-	.animation-delay(400ms);
-	margin-left: 1em;
-}
+  // Types
+  // ------------------------------
 
-// Types
-// ------------------------------
+  // default
+  &-default > &-dot { background-color: @spin-dot-default; }
 
-// default
-.spin-default > .spin-dot { background-color: @spin-dot-default; }
+  // primary
+  &-primary > &-dot { background-color: @primary-color; }
 
-// primary
-.spin-primary > .spin-dot { background-color: @spin-dot-primary; }
+  // Sizes
+  // ------------------------------
 
-// inverted
-.spin-inverted > .spin-dot { background-color: @spin-dot-inverted; }
+  // small
+  &-sm {
+    font-size: @spin-dot-size-sm;
+    height: @spin-dot-size-sm;
+  }
 
-
-// Sizes
-// ------------------------------
-
-// small
-.spin-sm {
-	font-size: @spin-dot-size-sm;
-	height: @spin-dot-size-sm;
-}
-
-// large
-.spin-lg {
-	font-size: @spin-dot-size-lg;
-	height: @spin-dot-size-lg;
+  // large
+  &-lg {
+    font-size: @spin-dot-size-lg;
+    height: @spin-dot-size-lg;
+  }
 }
 
 // pulse
-@-webkit-keyframes pulse {
-	0%, 80%, 100% { opacity: 0; }
-	40% { opacity: 1; }
-}
-@keyframes pulse {
-	0%, 80%, 100% { opacity: 0; }
-	40% { opacity: 1; }
+@keyframes antSpinPulse {
+  0%, 80%, 100% { opacity: 0; }
+  40% { opacity: 1; }
 }
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 9e4f9f474d..5a15ae04fc 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -142,10 +142,7 @@
 // Spin
 // --------------------------------
 @spin-dot-default            : #999;
-@spin-dot-inverted           : #fff;
-@spin-dot-primary            : #2db7f5;
 
 @spin-dot-size               : 8px;
 @spin-dot-size-sm            : @spin-dot-size / 2;
 @spin-dot-size-lg            : @spin-dot-size * 2;
-