diff --git a/docs/web/api/timeline.md b/docs/web/api/timeline.md
new file mode 100644
index 0000000000..741d3a1fe8
--- /dev/null
+++ b/docs/web/api/timeline.md
@@ -0,0 +1,54 @@
+---
+title: Timeline 时间轴
+description: 可视化地呈现时间流信息。
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础用法
+
+按照时间顺序或倒序规则的展示信息内容。
+
+{{ base }}
+
+### 控制排序的时间轴
+
+可以设置正序或倒序时间的时间轴。
+
+{{ reverse }}
+
+### 自定义节点的时间轴
+
+可以根据业务或用户需要自定义节点样式。
+
+{{ dot }}
+
+### 不同轴线的时间轴
+
+提供直线、虚线两种时间轴样式。
+
+{{ dashed }}
+
+### 自定义内容的时间轴
+
+可以根据需要更改显示信息的标题、描述内容、样式等内容。
+
+{{ custom }}
+
+### 不同内容的对齐方式
+
+以轴线和结点为坐标，其他全部内容信息在其位置上的不同对齐方式。
+
+{{ mode }}
+
+### 动态加载的时间轴
+
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点
+
+{{ pending }}
+
+### 不同状态的时间轴
+
+可以设置圆圈为实心、禁用状态
+{{ status }}
diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less
new file mode 100644
index 0000000000..6f1cb3a6a3
--- /dev/null
+++ b/style/web/components/timeline/_index.less
@@ -0,0 +1,185 @@
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "../../mixins/_layout.less";
+
+@import "../../mixins/_reset.less";
+.@{prefix}-timeline {
+  display: flex;
+  flex-direction: column;
+
+  &-horizontal {
+    flex-direction: row;
+  }
+}
+
+.@{prefix}-timeline-item {
+  position: relative;
+  margin: 0;
+  padding: 0 0 40px;
+
+  &-disabled {
+    color: @timeline-content-color;
+    opacity: @timeline-disabled-opacity;
+    cursor: not-allowed;
+
+    .@{prefix}-timeline-item-dot {
+      border-color: @timeline-disable-dot-color !important;
+      color: @timeline-disable-dot-color !important;
+    }
+  }
+
+  &-horizontal {
+    flex: 1;
+  }
+
+  &:last-child {
+    .@{prefix}-timeline-item-tail {
+      display: none;
+    }
+  }
+
+  &-alternate:nth-child(even) {
+    .@{prefix}-timeline-item-wrapper {
+      left: calc(50% - 4px);
+      width: calc(50% - 14px);
+      text-align: left;
+    }
+
+    .@{prefix}-timeline-item-tail,
+    .@{prefix}-timeline-item-dot {
+      left: 50%;
+    }
+
+    .@{prefix}-timeline-item-dot {
+      margin-left: -4px;
+    }
+  }
+
+  &-alternate:nth-child(odd) {
+    .@{prefix}-timeline-item-wrapper {
+      width: calc(50% - 14px);
+      margin: 0;
+      text-align: right;
+      position: relative;
+      left: -30px;
+    }
+
+    .@{prefix}-timeline-item-tail,
+    .@{prefix}-timeline-item-dot {
+      left: 50%;
+    }
+
+    .@{prefix}-timeline-item-dot {
+      margin-left: -4px;
+    }
+  }
+
+  &-right {
+    .@{prefix}-timeline-item-wrapper {
+      width: calc(100% - 50px);
+      margin: 0;
+      text-align: right;
+    }
+
+    .@{prefix}-timeline-item-tail,
+    .@{prefix}-timeline-item-dot {
+      left: calc(100% - 6px);
+    }
+
+    .@{prefix}-timeline-item-dot {
+      margin-left: -4px;
+    }
+  }
+
+  &-tail {
+    position: absolute;
+
+    &-vertical {
+      top: 24px;
+      left: 5px;
+      height: calc(100% - 30px);
+      border-left: 2px solid @timeline-border-color;
+
+      &-dashed {
+        border-left: 2px dashed @timeline-border-color !important;
+      }
+    }
+
+    &-horizontal {
+      top: 6px;
+      left: 20px;
+      width: calc(100% - 30px);
+      border-top: 2px solid @timeline-border-color;
+
+      &-dashed {
+        border-top: 2px dashed @timeline-border-color !important;
+      }
+    }
+  }
+
+  &-dot {
+    position: absolute;
+    top: 2px;
+    width: @timeline-dot-width;
+    height: @timeline-dot-width;
+    background-color: #fff;
+    border: 2px solid transparent;
+    border-radius: 100px;
+
+    &-custom {
+      position: absolute;
+      top: 8px;
+      left: 6px;
+      width: auto;
+      height: auto;
+      margin-top: 0;
+      padding: 3px 1px;
+      line-height: 1;
+      text-align: center;
+      border: 0;
+      border-radius: 0;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &-wrapper {
+    &-vertical {
+      position: relative;
+      padding-left: 28px;
+      top: -3px;
+    }
+
+    &-horizontal {
+      position: absolute;
+      left: 0;
+      bottom: -30px;
+    }
+
+    &-right {
+      width: calc(50% - 12px);
+      margin: 0;
+      text-align: right;
+    }
+  }
+
+  &-content {
+    color: @timeline-content-color;
+    font-size: @timeline-content-font-size;
+  }
+
+  &-timestamp {
+    margin-top: @timeline-timestamp-margin-top;
+    color: @timeline-content-color;
+    opacity: @timeline-timestamp-opacity;
+    font-size: @timeline-timestamp-font-size;
+  }
+
+  &-description {
+    margin-top: @timeline-timestamp-margin-top;
+    color: @timeline-content-color;
+    opacity: @timeline-timestamp-opacity;
+    font-size: @timeline-description-font-size;
+  }
+}
diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less
new file mode 100644
index 0000000000..7bdcdfa204
--- /dev/null
+++ b/style/web/components/timeline/_var.less
@@ -0,0 +1,11 @@
+@timeline-dot-width: 8px;
+@timeline-dot-height: 8px;
+@timeline-content-color: #0000000;
+@timeline-disable-dot-color: #c5c5c5;
+@timeline-border-color: #0052d9;
+@timeline-disabled-opacity: .4;
+@timeline-content-font-size: 16px;
+@timeline-timestamp-margin-top: 8px;
+@timeline-timestamp-opacity: .6;
+@timeline-timestamp-font-size: 14px;
+@timeline-description-font-size: 12px;