From dc9c052bbd0e5247eb1b1be12861e1d475b1faee Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Fri, 9 Feb 2018 17:09:50 +0800
Subject: [PATCH 1/2] add spin

---
 components/avatar/demo/index.vue         |  16 --
 components/index.js                      |   2 +
 components/spin/Spin.vue                 | 142 ++++++++++++++++
 components/spin/demo/basic.md            |  17 ++
 components/spin/demo/custom-indicator.md |  19 +++
 components/spin/demo/delayAndDebounce.md |  44 +++++
 components/spin/demo/index.vue           |  58 +++++++
 components/spin/demo/inside.md           |  27 ++++
 components/spin/demo/nested.md           |  43 +++++
 components/spin/demo/size.md             |  19 +++
 components/spin/demo/tip.md              |  28 ++++
 components/spin/index.en-US.md           |  11 ++
 components/spin/index.js                 |   3 +
 components/spin/index.zh-CN.md           |  11 ++
 components/spin/style/index.js           |   2 +
 components/spin/style/index.less         | 196 +++++++++++++++++++++++
 components/style.js                      |   1 +
 examples/demo.js                         |   1 +
 examples/routes.js                       |   2 +-
 19 files changed, 625 insertions(+), 17 deletions(-)
 create mode 100644 components/spin/Spin.vue
 create mode 100644 components/spin/demo/basic.md
 create mode 100644 components/spin/demo/custom-indicator.md
 create mode 100644 components/spin/demo/delayAndDebounce.md
 create mode 100644 components/spin/demo/index.vue
 create mode 100644 components/spin/demo/inside.md
 create mode 100644 components/spin/demo/nested.md
 create mode 100644 components/spin/demo/size.md
 create mode 100644 components/spin/demo/tip.md
 create mode 100644 components/spin/index.en-US.md
 create mode 100644 components/spin/index.js
 create mode 100644 components/spin/index.zh-CN.md
 create mode 100644 components/spin/style/index.js
 create mode 100644 components/spin/style/index.less

diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue
index 9cdfbb407..9c9ba2f30 100644
--- a/components/avatar/demo/index.vue
+++ b/components/avatar/demo/index.vue
@@ -14,23 +14,7 @@ const md = {
           Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
           `,
 }
-
-const UserList = ['U', 'Lucy', 'Tom', 'Edward']
-const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
 export default {
-  data () {
-    return {
-      avatarValue: UserList[0],
-      color: colorList[0],
-    }
-  },
-  methods: {
-    changeValue () {
-      const index = UserList.indexOf(this.avatarValue)
-      this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
-      this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
-    },
-  },
   render () {
     return (
       <div>
diff --git a/components/index.js b/components/index.js
index 534188583..730e4d049 100644
--- a/components/index.js
+++ b/components/index.js
@@ -63,6 +63,8 @@ export { Collapse, CollapsePanel }
 import notification from './notification'
 import message from './message'
 
+export { default as Spin } from './spin'
+
 const api = {
   notification,
   message,
diff --git a/components/spin/Spin.vue b/components/spin/Spin.vue
new file mode 100644
index 000000000..a911b710a
--- /dev/null
+++ b/components/spin/Spin.vue
@@ -0,0 +1,142 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import isCssAnimationSupported from '../_util/isCssAnimationSupported'
+import animate from '../_util/css-animation'
+
+export default {
+  name: 'Spin',
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string.def('ant-spin'),
+    spinning: PropTypes.bool.def(true),
+    size: PropTypes.oneOf(['small', 'default', 'large']).def('default'),
+    wrapperClassName: PropTypes.string.def(''),
+    tip: PropTypes.string,
+    delay: PropTypes.number,
+  },
+  data () {
+    const { spinning } = this
+    return {
+      stateSpinning: spinning,
+      debounceTimeout: null,
+      delayTimeout: null,
+      notCssAnimationSupported: false,
+    }
+  },
+  methods: {
+    getHasDefaultSlots () {
+      return this.$slots && this.$slots.default
+    },
+  },
+  mounted () {
+    if (!isCssAnimationSupported()) {
+      // Show text in IE9
+      this.setState({
+        notCssAnimationSupported: true,
+      })
+    }
+  },
+  beforeDestroy () {
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout)
+    }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout)
+    }
+  },
+  watch: {
+    spinning (val) {
+      const { delay, stateSpinning, spinning } = this
+
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout)
+      }
+      if (stateSpinning && !spinning) {
+        this.debounceTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), 200)
+        if (this.delayTimeout) {
+          clearTimeout(this.delayTimeout)
+        }
+      } else {
+        if (spinning && delay && !isNaN(Number(delay))) {
+          if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout)
+          }
+          this.delayTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), delay)
+        } else {
+          this.setState({ stateSpinning: spinning })
+        }
+      }
+    },
+  },
+  render () {
+    const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
+    const { notCssAnimationSupported, $slots, stateSpinning } = this
+
+    const spinClassName = {
+      [prefixCls]: true,
+      [`${prefixCls}-sm`]: size === 'small',
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-spinning`]: stateSpinning,
+      [`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
+    }
+
+    const spinIndicator = $slots.indicator ? $slots.indicator : (
+      <span class={`${prefixCls}-dot`}>
+        <i />
+        <i />
+        <i />
+        <i />
+      </span>
+    )
+
+    const spinElement = (
+      <div {...restProps} class={spinClassName} >
+        {spinIndicator}
+        {tip ? <div class={`${prefixCls}-text`}>{tip}</div> : null}
+      </div>
+    )
+
+    if (this.getHasDefaultSlots()) {
+      let animateClassName = prefixCls + '-nested-loading'
+      if (wrapperClassName) {
+        animateClassName += ' ' + wrapperClassName
+      }
+      const containerClassName = {
+        [`${prefixCls}-container`]: true,
+        [`${prefixCls}-blur`]: stateSpinning,
+      }
+
+      const transitionProps = {
+        props: Object.assign({
+          appear: true,
+          css: false,
+        }),
+      }
+      const transitionEvent = {
+        enter: (el, done) => {
+          animate(el, 'fade-enter', done)
+        },
+        leave: (el, done) => {
+          animate(el, 'fade-leave', done)
+        },
+      }
+
+      transitionProps.on = transitionEvent
+
+      return (<transition
+        {...transitionProps}
+      >
+        <div class={animateClassName}>
+          {stateSpinning && <div key='loading'>{spinElement}</div>}
+          <div class={containerClassName} key='container'>
+            {this.$slots.default}
+          </div>
+        </div>
+      </transition>
+      )
+    }
+    return spinElement
+  },
+}
+</script>
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
new file mode 100644
index 000000000..d29324538
--- /dev/null
+++ b/components/spin/demo/basic.md
@@ -0,0 +1,17 @@
+<cn>
+#### 基本用法
+一个简单的 loading 状态。
+</cn>
+
+<us>
+#### basic Usage
+A simple loading status.
+</us>
+
+```html
+<template>
+  <div>
+    <a-spin />
+  </div>
+</template>
+```
diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md
new file mode 100644
index 000000000..358bdd327
--- /dev/null
+++ b/components/spin/demo/custom-indicator.md
@@ -0,0 +1,19 @@
+<cn>
+#### 自定义指示符
+使用自定义指示符。
+</cn>
+
+<us>
+#### Custom spinning indicator
+Use custom loading indicator.
+</us>
+
+```html
+<template>
+  <div>
+    <a-spin>
+      <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
+    </a-spin>
+  </div>
+</template>
+```
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
new file mode 100644
index 000000000..fe86833da
--- /dev/null
+++ b/components/spin/demo/delayAndDebounce.md
@@ -0,0 +1,44 @@
+<cn>
+#### 延迟
+延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
+</cn>
+
+<us>
+#### delay
+Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
+</us>
+
+```html
+<style>
+  .content{
+    border: 1px solid #91d5ff;
+    background-color: #e6f7ff;
+    padding: 30px;
+  }
+</style>
+<template>
+  <div>
+    <a-spin :spinning="spinning" :delay="delayTime">
+      <div class="content">
+        可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
+      </div>
+    </a-spin>
+    <a-button @click="changeSpinning" style="margin-top: 5px">切换</a-button>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        spinning: false,
+        delayTime: 500,
+      }
+    },
+    methods: {
+      changeSpinning(){
+        this.spinning = !this.spinning
+      }
+    },
+  }
+</script>
+```
diff --git a/components/spin/demo/index.vue b/components/spin/demo/index.vue
new file mode 100644
index 000000000..914f76daf
--- /dev/null
+++ b/components/spin/demo/index.vue
@@ -0,0 +1,58 @@
+<script>
+import CustomIndicator from './custom-indicator'
+import Basic from './basic'
+import DelayAndDebounce from './delayAndDebounce'
+import Inside from './inside'
+import Nested from './nested'
+import Size from './size'
+import Tip from './tip'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Spin 加载中
+
+  用于页面和区块的加载中状态。
+
+  ## 何时使用
+
+  页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
+            ## 代码演示`,
+  us: `# Spin
+
+  A spinner for displaying loading state of a page or a section.
+
+  # When To Use
+
+  When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.`,
+}
+export default {
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic />
+        <br/>
+        <Size />
+        <br/>
+        <Inside />
+        <br/>
+        <Nested />
+        <br/>
+        <Tip />
+        <br/>
+        <DelayAndDebounce />
+        <br/>
+        <CustomIndicator />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
new file mode 100644
index 000000000..a24c60f9a
--- /dev/null
+++ b/components/spin/demo/inside.md
@@ -0,0 +1,27 @@
+<cn>
+#### 容器
+放入一个容器中。
+</cn>
+
+<us>
+#### Inside a container
+Spin in a container.
+</us>
+
+```html
+<style>
+  .example {
+    text-align: center;
+    background: rgba(0,0,0,0.05);
+    border-radius: 4px;
+    margin-bottom: 20px;
+    padding: 30px 50px;
+    margin: 20px 0;
+  }
+</style>
+<template>
+  <div class="example">
+    <a-spin />
+  </div>
+</template>
+```
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
new file mode 100644
index 000000000..39da31317
--- /dev/null
+++ b/components/spin/demo/nested.md
@@ -0,0 +1,43 @@
+<cn>
+#### 卡片加载中
+可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。
+</cn>
+
+<us>
+#### Embedded mode
+Embedding content into `Spin` will alter it into loading state.
+</us>
+
+```html
+<style>
+  .content{
+    border: 1px solid #91d5ff;
+    background-color: #e6f7ff;
+    padding: 30px;
+  }
+</style>
+<template>
+  <div>
+    <a-spin :spinning="spinning">
+      <div class="content">
+        可以点击‘切换’按钮，控制本区域的spin展示。
+      </div>
+    </a-spin>
+    <a-button @click="changeSpinning" style="margin-top: 5px">切换</a-button>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        spinning: false
+      }
+    },
+    methods: {
+      changeSpinning(){
+        this.spinning = !this.spinning
+      }
+    },
+  }
+</script>
+```
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
new file mode 100644
index 000000000..c97ee4d64
--- /dev/null
+++ b/components/spin/demo/size.md
@@ -0,0 +1,19 @@
+<cn>
+#### 各种大小
+小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。
+</cn>
+
+<us>
+#### Size
+A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
+</us>
+
+```html
+<template>
+  <div>
+    <a-spin size="small" />
+    <a-spin />
+    <a-spin size="large" />
+  </div>
+</template>
+```
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
new file mode 100644
index 000000000..09402a1f4
--- /dev/null
+++ b/components/spin/demo/tip.md
@@ -0,0 +1,28 @@
+<cn>
+#### 自定义描述文案
+自定义描述文案。
+</cn>
+
+<us>
+#### Customized description
+Customized description content.
+</us>
+
+```html
+<style>
+  .content{
+    border: 1px solid #91d5ff;
+    background-color: #e6f7ff;
+    padding: 30px;
+  }
+</style>
+<template>
+  <div>
+    <a-spin tip="Loading...">
+      <div class="content">
+        我的描述文案是自定义的。。。
+      </div>
+    </a-spin>
+  </div>
+</template>
+```
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
new file mode 100644
index 000000000..c35607151
--- /dev/null
+++ b/components/spin/index.en-US.md
@@ -0,0 +1,11 @@
+
+## API
+
+| Property | Description | Type | Default Value |
+| -------- | ----------- | ---- | ------------- |
+| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
+| indicator | React node of the spinning indicator | slot | - |
+| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
+| spinning | whether Spin is spinning | boolean | true |
+| tip | customize description content when Spin has children | string | - |
+| wrapperClassName | className of wrapper when Spin has children | string | - |
diff --git a/components/spin/index.js b/components/spin/index.js
new file mode 100644
index 000000000..fd6f323e0
--- /dev/null
+++ b/components/spin/index.js
@@ -0,0 +1,3 @@
+import Spin from './Spin'
+
+export default Spin
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
new file mode 100644
index 000000000..ed0ec4072
--- /dev/null
+++ b/components/spin/index.zh-CN.md
@@ -0,0 +1,11 @@
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
+| indicator | 加载指示符 | slot方式 | - |
+| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
+| spinning | 是否旋转 | boolean | true |
+| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
+| wrapperClassName | 包装器的类属性 | string | - |
diff --git a/components/spin/style/index.js b/components/spin/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/spin/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/spin/style/index.less b/components/spin/style/index.less
new file mode 100644
index 000000000..d3e8f3481
--- /dev/null
+++ b/components/spin/style/index.less
@@ -0,0 +1,196 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@spin-prefix-cls: ~"@{ant-prefix}-spin";
+@spin-dot-default: @text-color-secondary;
+
+.@{spin-prefix-cls} {
+  .reset-component;
+  color: @primary-color;
+  vertical-align: middle;
+  text-align: center;
+  opacity: 0;
+  position: absolute;
+  transition: transform 0.3s @ease-in-out-circ;
+  display: none;
+
+  &-spinning {
+    opacity: 1;
+    position: static;
+    display: inline-block;
+  }
+
+  &-nested-loading {
+    position: relative;
+    > div > .@{spin-prefix-cls} {
+      position: absolute;
+      height: 100%;
+      max-height: 320px;
+      width: 100%;
+      z-index: 4;
+      .@{spin-prefix-cls}-dot {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -@spin-dot-size / 2;
+      }
+      .@{spin-prefix-cls}-text {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
+        text-shadow: 0 1px 2px #fff;
+      }
+      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
+        margin-top: -@spin-dot-size / 2 - 10px;
+      }
+    }
+
+    > div > .@{spin-prefix-cls}-sm {
+      .@{spin-prefix-cls}-dot {
+        margin: -@spin-dot-size-sm / 2;
+      }
+      .@{spin-prefix-cls}-text {
+        padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
+      }
+      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
+        margin-top: -@spin-dot-size-sm / 2 - 10px;
+      }
+    }
+
+    > div > .@{spin-prefix-cls}-lg {
+      .@{spin-prefix-cls}-dot {
+        margin: -@spin-dot-size-lg / 2;
+      }
+      .@{spin-prefix-cls}-text {
+        padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
+      }
+      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
+        margin-top: -@spin-dot-size-lg / 2 - 10px;
+      }
+    }
+  }
+
+  &-container {
+    position: relative;
+    .clearfix;
+  }
+
+  &-blur {
+    overflow: hidden;
+    opacity: 0.7;
+    -webkit-filter: blur(0.5px);
+    filter: blur(0.5px);
+
+    /* autoprefixer: off */
+    filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
+    // workround for a strange style bug in safari:
+    // https://github.com/ant-design/ant-design/issues/4622
+    // have no clue why this works
+    -webkit-transform: translateZ(0);
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #fff;
+      opacity: 0.3;
+      transition: all .3s;
+      z-index: 10;
+    }
+  }
+
+  // tip
+  // ------------------------------
+  &-tip {
+    color: @spin-dot-default;
+  }
+
+  // dots
+  // ------------------------------
+
+  &-dot {
+    position: relative;
+    display: inline-block;
+    .square(@spin-dot-size);
+    transform: rotate(45deg);
+    animation: antRotate 1.2s infinite linear;
+    i {
+      width: 9px;
+      height: 9px;
+      border-radius: 100%;
+      background-color: @primary-color;
+      transform: scale(0.75);
+      display: block;
+      position: absolute;
+      opacity: 0.3;
+      animation: antSpinMove 1s infinite linear alternate;
+      transform-origin: 50% 50%;
+      &: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;
+      }
+    }
+  }
+
+  // Sizes
+  // ------------------------------
+  // small
+  &-sm &-dot {
+    .square(@spin-dot-size-sm);
+    i {
+      width: 6px;
+      height: 6px;
+    }
+  }
+
+  // large
+  &-lg &-dot {
+    .square(@spin-dot-size-lg);
+    i {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &&-show-text &-text {
+    display: block;
+  }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+ */
+  .@{spin-prefix-cls}-blur {
+    background: @component-background;
+    opacity: 0.5;
+  }
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes antRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
diff --git a/components/style.js b/components/style.js
index fc3973e1d..04b06522b 100644
--- a/components/style.js
+++ b/components/style.js
@@ -20,3 +20,4 @@ import './card/style'
 import './collapse/style'
 import './notification/style'
 import './message/style'
+import './spin/style'
diff --git a/examples/demo.js b/examples/demo.js
index 0e8d60654..27dfc1427 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -21,4 +21,5 @@ export { default as divider } from 'antd/divider/demo/index.vue'
 export { default as collapse } from 'antd/collapse/demo/index.vue'
 export { default as notification } from 'antd/notification/demo/index.vue'
 export { default as message } from 'antd/message/demo/index.vue'
+export { default as spin } from 'antd/spin/demo/index.vue'
 
diff --git a/examples/routes.js b/examples/routes.js
index 5e4a0d694..74145911d 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/vc-select/demo/${d}.vue`),
+    component: import(`../components/spin/demo/index.vue`),
   }
 }
 export default [

From 2995eaf77e329f0e06b0d1f86050ba8c6fd8303f Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Fri, 9 Feb 2018 17:18:51 +0800
Subject: [PATCH 2/2] fix spin demo css

---
 components/spin/demo/delayAndDebounce.md | 4 ++--
 components/spin/demo/nested.md           | 4 ++--
 components/spin/demo/tip.md              | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index fe86833da..35f4f7507 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -10,7 +10,7 @@ Specifies a delay for loading state. If `spinning` ends during delay, loading st
 
 ```html
 <style>
-  .content{
+  .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;
     padding: 30px;
@@ -19,7 +19,7 @@ Specifies a delay for loading state. If `spinning` ends during delay, loading st
 <template>
   <div>
     <a-spin :spinning="spinning" :delay="delayTime">
-      <div class="content">
+      <div class="spin-content">
         可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
       </div>
     </a-spin>
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 39da31317..66b792097 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -10,7 +10,7 @@ Embedding content into `Spin` will alter it into loading state.
 
 ```html
 <style>
-  .content{
+  .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;
     padding: 30px;
@@ -19,7 +19,7 @@ Embedding content into `Spin` will alter it into loading state.
 <template>
   <div>
     <a-spin :spinning="spinning">
-      <div class="content">
+      <div class="spin-content">
         可以点击‘切换’按钮，控制本区域的spin展示。
       </div>
     </a-spin>
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index 09402a1f4..9acebed70 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -10,7 +10,7 @@ Customized description content.
 
 ```html
 <style>
-  .content{
+  .spin-content{
     border: 1px solid #91d5ff;
     background-color: #e6f7ff;
     padding: 30px;
@@ -19,7 +19,7 @@ Customized description content.
 <template>
   <div>
     <a-spin tip="Loading...">
-      <div class="content">
+      <div class="spin-content">
         我的描述文案是自定义的。。。
       </div>
     </a-spin>