diff --git a/components/index.js b/components/index.js
index e896f363f..e3650b104 100644
--- a/components/index.js
+++ b/components/index.js
@@ -142,3 +142,7 @@ export { default as version } from './version'
 export { default as Slider } from './slider'
 
 export { default as Progress } from './progress'
+
+import Timeline from './timeline'
+const TimelineItem = Timeline.Item
+export { Timeline, TimelineItem }
diff --git a/components/slider/demo/index.vue b/components/slider/demo/index.vue
index a04488de3..7d65ffaff 100644
--- a/components/slider/demo/index.vue
+++ b/components/slider/demo/index.vue
@@ -1,6 +1,6 @@
 <script>
 import Basic from './basic.md'
-import InputNumber from './input-number.md'
+// import InputNumber from './input-number.md'
 import IconSlider from './icon-slider.md'
 import TipFormatter from './tip-formatter.md'
 import Event from './event.md'
@@ -34,8 +34,6 @@ export default {
         <br/>
         <Basic />
         <br />
-        <InputNumber />
-        <br />
         <IconSlider />
         <br />
         <TipFormatter />
diff --git a/components/style.js b/components/style.js
index 51d741d25..5e3caafad 100644
--- a/components/style.js
+++ b/components/style.js
@@ -37,3 +37,4 @@ import './date-picker/style'
 import './slider/style'
 import './table/style'
 import './progress/style'
+import './timeline/style'
diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx
new file mode 100644
index 000000000..980fd14a9
--- /dev/null
+++ b/components/timeline/Timeline.jsx
@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import PropTypes from '../_util/vue-types'
+import { getOptionProps, initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
+import TimelineItem from './TimelineItem'
+import Icon from '../icon'
+
+export const TimelineProps = {
+  prefixCls: PropTypes.string,
+  className: PropTypes.string,
+  /** 指定最后一个幽灵节点是否存在或内容 */
+  pending: PropTypes.any,
+}
+
+export default {
+  name: 'Timeline',
+  props: initDefaultProps(TimelineProps, {
+    prefixCls: 'ant-timeline',
+  }),
+  render () {
+    const { prefixCls, ...restProps } = getOptionProps(this)
+    const pending = getComponentFromProp(this, 'pending')
+    const pendingNode = typeof pending === 'boolean' ? null : pending
+    const classString = classNames(prefixCls, {
+      [`${prefixCls}-pending`]: !!pending,
+    })
+    // Remove falsy items
+    const falsylessItems = filterEmpty(this.$slots.default)
+    const items = falsylessItems.map((item, idx) => {
+      return cloneElement(item, {
+        props: {
+          last: falsylessItems.length - 1 === idx,
+        },
+      })
+    })
+    const pendingItem = (pending) ? (
+      <TimelineItem
+        pending={!!pending}
+      >
+        <Icon slot='dot' type='loading' />
+        {pendingNode}
+      </TimelineItem>
+    ) : null
+    const timelineProps = {
+      props: {
+        ...restProps,
+      },
+      class: classString,
+      on: this.$listeners,
+    }
+    return (
+      <ul {...timelineProps}>
+        {items}
+        {pendingItem}
+      </ul>
+    )
+  },
+}
diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.jsx
new file mode 100644
index 000000000..062ee70f6
--- /dev/null
+++ b/components/timeline/TimelineItem.jsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import PropTypes from '../_util/vue-types'
+import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util/props-util'
+
+export const TimeLineItemProps = {
+  prefixCls: PropTypes.string,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  dot: PropTypes.any,
+  pending: PropTypes.bool,
+  last: PropTypes.bool,
+}
+
+export default {
+  name: 'TimelineItem',
+  props: initDefaultProps(TimeLineItemProps, {
+    prefixCls: 'ant-timeline',
+    color: 'blue',
+    last: false,
+    pending: false,
+  }),
+  render () {
+    const { prefixCls, color = '', last, pending, ...restProps } = getOptionProps(this)
+    const dot = getComponentFromProp(this, 'dot')
+    const itemClassName = classNames({
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-last`]: last,
+      [`${prefixCls}-item-pending`]: pending,
+    })
+
+    const dotClassName = classNames({
+      [`${prefixCls}-item-head`]: true,
+      [`${prefixCls}-item-head-custom`]: dot,
+      [`${prefixCls}-item-head-${color}`]: true,
+    })
+
+    return (
+      <li {...restProps} class={itemClassName}>
+        <div class={`${prefixCls}-item-tail`} />
+        <div
+          class={dotClassName}
+          style={{ borderColor: /blue|red|green/.test(color) ? null : color }}
+        >
+          {dot}
+        </div>
+        <div class={`${prefixCls}-item-content`}>
+          {this.$slots.default}
+        </div>
+      </li>
+    )
+  },
+}
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
new file mode 100644
index 000000000..44a42534a
--- /dev/null
+++ b/components/timeline/demo/basic.md
@@ -0,0 +1,22 @@
+<cn>
+#### 基本用法
+基本的时间轴。
+</cn>
+
+<us>
+#### Basic
+Basic timeline.
+</us>
+
+```html
+<template>
+  <a-timeline>
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
+    <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
+    <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
new file mode 100644
index 000000000..35b50fff4
--- /dev/null
+++ b/components/timeline/demo/color.md
@@ -0,0 +1,31 @@
+<cn>
+#### 圆圈颜色
+圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
+</cn>
+
+<us>
+#### Color
+Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
+</us>
+
+```html
+<template>
+  <a-timeline>
+    <a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item color="red">
+      <p>Solve initial network problems 1</p>
+      <p>Solve initial network problems 2</p>
+      <p>Solve initial network problems 3 2015-09-01</p>
+    </a-timeline-item>
+    <a-timeline-item>
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
+
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
new file mode 100644
index 000000000..79fff2b9b
--- /dev/null
+++ b/components/timeline/demo/custom.md
@@ -0,0 +1,26 @@
+<cn>
+#### 自定义时间轴点
+基本的时间轴。
+</cn>
+
+<us>
+#### Custom
+Set a node as an icon or other custom element.
+</us>
+
+```html
+<template>
+  <a-timeline>
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
+    <a-timeline-item color="red">
+      <a-icon slot="dot" type="clock-circle-o" style="fontSize: '16px'" />
+      Technical testing 2015-09-01
+    </a-timeline-item>
+    <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
+
diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue
new file mode 100644
index 000000000..494692085
--- /dev/null
+++ b/components/timeline/demo/index.vue
@@ -0,0 +1,54 @@
+<script>
+import Basic from './basic.md'
+import Color from './color.md'
+import Pending from './pending.md'
+import Custom from './custom.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 时间轴
+  垂直展示的时间流信息。
+  ## 何时使用
+  在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
+
+  - 当有一系列信息需按时间排列时，可正序和倒序。
+  - 需要有一条时间轴进行视觉上的串联时。。
+        ## 代码演示`,
+  us: `# Data Display
+  Vertical display timeline.
+
+  - When a series of information needs to be ordered by time (ascend or descend).
+  - When you need a timeline to make a visual connection.
+  ## Examples
+  `,
+}
+export default {
+  category: 'Components',
+  subtitle: '时间轴',
+  type: 'Data Display',
+  title: 'Timeline',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <br/>
+        <Basic />
+        <br/>
+        <Color />
+        <br/>
+        <Pending />
+        <br/>
+        <Custom />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
new file mode 100644
index 000000000..50a67867f
--- /dev/null
+++ b/components/timeline/demo/pending.md
@@ -0,0 +1,23 @@
+<cn>
+#### 最后一个
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点。（用于时间正序排列）
+</cn>
+
+<us>
+#### Last node
+When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`. Used in ascend chronological order.
+</us>
+
+```html
+<template>
+  <a-timeline pending="Recording...">
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
+    <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
+
+
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
new file mode 100644
index 000000000..5de3cd3c7
--- /dev/null
+++ b/components/timeline/index.en-US.md
@@ -0,0 +1,27 @@
+## API
+
+```` html
+<Timeline>
+  <Timeline.Item>step1 2015-09-01</Timeline.Item>
+  <Timeline.Item>step2 2015-09-01</Timeline.Item>
+  <Timeline.Item>step3 2015-09-01</Timeline.Item>
+  <Timeline.Item>step4 2015-09-01</Timeline.Item>
+</Timeline>
+````
+
+### Timeline
+
+Timeline
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` |
+
+### Timeline.Item
+
+Node of timeline
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
+| dot | Customize timeline dot | string\|slot | - |
diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx
new file mode 100644
index 000000000..48bd15f66
--- /dev/null
+++ b/components/timeline/index.jsx
@@ -0,0 +1,9 @@
+import Timeline from './Timeline'
+
+export { TimelineProps } from './Timeline'
+export { TimeLineItemProps } from './TimelineItem'
+import TimelineItem from './TimelineItem'
+
+Timeline.Item = TimelineItem
+
+export default Timeline
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
new file mode 100644
index 000000000..c127fafdb
--- /dev/null
+++ b/components/timeline/index.zh-CN.md
@@ -0,0 +1,27 @@
+## API
+
+```` html
+<Timeline>
+  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+</Timeline>
+````
+
+### Timeline
+
+时间轴。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false |
+
+### Timeline.Item
+
+时间轴的每一个节点。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
+| dot | 自定义时间轴点 | string\|slot | - |
diff --git a/components/timeline/style/index.jsx b/components/timeline/style/index.jsx
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/timeline/style/index.jsx
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less
new file mode 100644
index 000000000..610ab815b
--- /dev/null
+++ b/components/timeline/style/index.less
@@ -0,0 +1,93 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@timeline-prefix-cls: ~"@{ant-prefix}-timeline";
+@timeline-color: @border-color-split;
+
+.@{timeline-prefix-cls} {
+  .reset-component;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &-item {
+    position: relative;
+    padding: 0 0 20px;
+    list-style: none;
+    margin: 0;
+    font-size: @font-size-base;
+
+    &-tail {
+      position: absolute;
+      left: 4px;
+      top: 0.75em;
+      height: 100%;
+      border-left: 2px solid @timeline-color;
+    }
+
+    &-pending &-head {
+      font-size: @font-size-sm;
+    }
+
+    &-pending &-tail {
+      display: none;
+    }
+
+    &-head {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background-color: @component-background;
+      border-radius: 100px;
+      border: 2px solid transparent;
+
+      &-blue {
+        border-color: @primary-color;
+        color: @primary-color;
+      }
+      &-red {
+        border-color: @error-color;
+        color: @error-color;
+      }
+      &-green {
+        border-color: @success-color;
+        color: @success-color;
+      }
+    }
+
+    &-head-custom {
+      position: absolute;
+      text-align: center;
+      line-height: 1;
+      margin-top: 0;
+      border: 0;
+      height: auto;
+      border-radius: 0;
+      padding: 3px 0;
+      transform: translate(-50%, -50%);
+      top: 5px;
+      left: 5px;
+      width: auto;
+    }
+
+    &-content {
+      padding: 0 0 0 18px;
+      position: relative;
+      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
+    }
+
+    &-last {
+      .@{timeline-prefix-cls}-item-tail {
+        border-left: 2px dotted @timeline-color;
+        display: none;
+      }
+      .@{timeline-prefix-cls}-item-content {
+        min-height: 48px;
+      }
+    }
+  }
+
+  &&-pending &-item-last &-item-tail {
+    display: block;
+  }
+}
diff --git a/contributors.md b/contributors.md
index fadb8c3d6..79aa47e5d 100644
--- a/contributors.md
+++ b/contributors.md
@@ -50,8 +50,7 @@ Collapse | done
 Spin | done
 Switch | done
 Steps | done
-Progress
-Slider
-Table
-Timeline
+Progress | done
+Slider | done InputNumber做完补全demo
+Timeline | done
 Transfer
diff --git a/examples/demo.js b/examples/demo.js
index f80c853f1..063ceb7eb 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -35,5 +35,6 @@ export { default as steps } from 'antd/steps/demo/index.vue'
 export { default as calendar } from 'antd/calendar/demo/index.vue'
 export { default as datePicker } from 'antd/date-picker/demo/index.vue'
 export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
-// export { default as slider } from 'antd/slider/demo/index.vue'
+export { default as slider } from 'antd/slider/demo/index.vue'
 export { default as progress } from 'antd/progress/demo/index.vue'
+export { default as timeline } from 'antd/timeline/demo/index.vue'
diff --git a/examples/routes.js b/examples/routes.js
index d5cf1ac00..b73615c7c 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/progress/demo/${d}`),
+    component: import(`../components/timeline/demo/${d}`),
   }
 }
 export default [