improve pending timeline style

components/timeline/Timeline.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import TimelineItem, { TimeLineItemProps } from './TimelineItem';
+import Icon from '../icon';
 
 export interface TimelineProps {
   prefixCls?: string;
@@ -30,7 +31,12 @@ export default class Timeline extends React.Component<TimelineProps, any> {
       }),
     );
     const pendingItem = (!!pending) ? (
-      <TimelineItem pending={!!pending}>{pendingNode}</TimelineItem>
+      <TimelineItem
+        pending={!!pending}
+        dot={<Icon type="loading" />}
+      >
+        {pendingNode}
+      </TimelineItem>
     ) : null;
     return (
       <ul {...restProps} className={classString}>

components/timeline/__tests__/__snapshots__/demo.test.js.snap

@@ -278,16 +278,16 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
       class="ant-timeline-item-tail"
     />
     <div
-      class="ant-timeline-item-head ant-timeline-item-head-blue"
-    />
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-spin anticon-loading"
+      />
+    </div>
     <div
       class="ant-timeline-item-content"
     >
-      <a
-        href="#"
-      >
-        See more
-      </a>
+      Recording...
     </div>
   </li>
 </ul>

components/timeline/demo/pending.md

@@ -7,9 +7,7 @@ title:
 
 ## zh-CN
 
-在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。
-
-一般用于按时间正序排列的模式。
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点。（用于时间正序排列）
 
 ## en-US
 
@@ -19,7 +17,7 @@ When the timeline is incomplete and ongoing, put a ghost node at last. set `pend
 import { Timeline } from 'antd';
 
 ReactDOM.render(
-  <Timeline pending={<a href="#">See more</a>}>
+  <Timeline pending="Recording...">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
     <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>

components/timeline/style/index.less

@@ -25,6 +25,10 @@
       border-left: 2px solid @timeline-color;
     }
 
+    &-pending &-head {
+      font-size: @font-size-sm;
+    }
+
     &-pending &-tail {
       display: none;
     }