diff --git a/examples/router/routes.js b/examples/router/routes.js
index 7e8d7be..a0ff018 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -66,6 +66,12 @@ const _components = [
         meta: { title: 'TabBar 标签栏' },
         component: () => import('@/views/docs/component/tab-bar.md'),
       },
+      {
+        path: 'steps',
+        name: 'steps',
+        meta: { title: 'Steps 步骤条' },
+        component: () => import('@/views/docs/component/steps.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/steps.md b/examples/views/docs/component/steps.md
new file mode 100644
index 0000000..4a9900d
--- /dev/null
+++ b/examples/views/docs/component/steps.md
@@ -0,0 +1,64 @@
+# Steps 步骤条
+
+说明
+
+## 基础用法
+
+说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div>
+    <zui-steps :steps="steps"></zui-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      steps: [
+        { name: '登录/注册' },
+        { name: '申请征信报告' },
+        { name: '提取征信报告' },
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
+
+## 纵向展示
+
+说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div style="width: 400px;">
+    <zui-steps :steps="steps" direction="vertical"></zui-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      steps: [
+        { name: '登录', text: '这是登录的描述' },
+        { name: '开通', text: '这是开通的描述' },
+        { name: '验证', text: '这是验证的描述' },
+        { name: '成功', text: '这是成功的描述' },
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/steps/index.css b/packages/steps/index.css
new file mode 100644
index 0000000..0083790
--- /dev/null
+++ b/packages/steps/index.css
@@ -0,0 +1,167 @@
+.zui-steps {
+  display: flex;
+  justify-content: space-around;
+  font-size: 14px;
+}
+.zui-steps.zui-steps-horizontal {
+  align-items: center;
+  padding: 10px 25px 20px;
+}
+.zui-steps.zui-steps-horizontal .step-wrapper {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.zui-steps.zui-steps-horizontal .step-wrapper.reached .text-wrapper .name {
+  color: #41485d;
+}
+.zui-steps.zui-steps-horizontal .step-wrapper.current .text-wrapper .name {
+  color: #fcd404;
+}
+.zui-steps.zui-steps-horizontal .text-wrapper {
+  top: 100%;
+  padding-top: 10px;
+  text-align: center;
+}
+.zui-steps.zui-steps-horizontal .text-wrapper .name {
+  color: #858b9c;
+}
+.zui-steps.zui-steps-horizontal .text-wrapper .desc {
+  margin-top: 10px;
+  color: #858b9c;
+}
+.zui-steps.zui-steps-horizontal.no-current .reached:last-of-type {
+  display: none !important;
+}
+.zui-steps.zui-steps-vertical {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.zui-steps.zui-steps-vertical.vertical-adaptive {
+  justify-content: normal;
+  padding: 20px 20px 4px;
+}
+.zui-steps.zui-steps-vertical.vertical-adaptive .bar.vertical-bar {
+  flex: 1;
+}
+.zui-steps.zui-steps-vertical .step-wrapper {
+  width: 100%;
+  margin: 4px 0;
+  align-items: stretch;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .icon-wrapper {
+  position: relative;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .icon-wrapper .step-node-default {
+  min-width: 20px;
+  min-height: 20px;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper {
+  left: 16px;
+  padding-left: 10px;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .name,
+.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .desc {
+  white-space: normal;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .name {
+  color: #41485d;
+}
+.zui-steps.zui-steps-vertical .step-wrapper .text-wrapper .desc {
+  margin-top: 10px;
+  color: #858b9c;
+}
+.zui-steps .icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e2e4ea;
+}
+.zui-steps .icon-wrapper >div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.zui-steps .icon-wrapper:nth-child(2) {
+  display: none;
+}
+.zui-steps .icon-wrapper .step-node-default-icon {
+  background: #e2e4ea;
+}
+.zui-steps .step-wrapper {
+  display: flex;
+  position: relative;
+  min-width: 20px;
+  min-height: 20px;
+}
+.zui-steps .step-wrapper .icon-wrapper {
+  min-width: 20px;
+  min-height: 20px;
+}
+.zui-steps .step-wrapper .icon-wrapper .zui-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px !important;
+  line-height: 20px;
+}
+.zui-steps .step-wrapper .text-wrapper {
+  position: absolute;
+}
+.zui-steps .step-wrapper .text-wrapper .name,
+.zui-steps .step-wrapper .text-wrapper .desc {
+  white-space: nowrap;
+}
+.zui-steps .step-wrapper .text-wrapper .name {
+  font-size: 14px;
+}
+.zui-steps .step-wrapper .text-wrapper .desc {
+  line-height: 14px;
+  font-size: 12px;
+}
+.zui-steps .step-wrapper.reached .icon-wrapper,
+.zui-steps .step-wrapper.current .icon-wrapper {
+  color: #fcd404;
+}
+.zui-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon,
+.zui-steps .step-wrapper.current .icon-wrapper .step-node-default-icon {
+  background: #fcd404;
+}
+.zui-steps .bar {
+  position: relative;
+  background-color: #e2e4ea;
+  overflow: hidden;
+}
+.zui-steps .bar .bar-inner {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  content: '';
+  transition: all linear 1s;
+}
+.zui-steps .bar.horizontal-bar {
+  flex: 1;
+  height: 1px;
+}
+.zui-steps .bar.horizontal-bar .bar-inner {
+  width: 100%;
+  height: 1px;
+  background-color: #fcd404;
+}
+.zui-steps .bar.vertical-bar {
+  left: 10px;
+  width: 1px;
+  transform: translateX(-50%);
+}
+.zui-steps .bar.vertical-bar .bar-inner {
+  width: 1px;
+  height: 100%;
+  background-color: #fcd404;
+}
+.zui-steps .bar:last-of-type.horizontal-bar {
+  display: none;
+}
+.zui-steps .bar:last-of-type.vertical-bar {
+  visibility: hidden;
+}
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
new file mode 100644
index 0000000..9c56a50
--- /dev/null
+++ b/packages/steps/index.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="zui-steps" :class="stepsClassRender">
+    <template v-for="(step, index) of steps">
+      <div class="step-wrapper" :class="[$_getStepStatusClass(index)]" :key="stepKey(index)">
+        <div v-if="$scopedSlots.icon" class="icon-wrapper">
+          <slot name="icon" :index="index" :current-index="currentLength" :step="step"></slot>
+        </div>
+        <div v-else class="icon-wrapper">
+          <template v-if="index < currentLength">
+            <slot v-if="$scopedSlots.reached || $slots.reached" name="reached" :index="index"></slot>
+            <div v-else class="step-node-default">
+              <div class="step-node-default-icon" style="width: 8px;height: 8px;border-radius: 50%;"></div>
+            </div>
+          </template>
+          <template v-else-if="index == currentLength">
+            <slot v-if="$scopedSlots.current || $slots.current" name="current" :index="index"></slot>
+            <zui-icon v-else name="checkcircle"></zui-icon>
+          </template>
+          <template v-else>
+            <slot v-if="$scopedSlots.unreached || $slots.unreached" name="unreached" :index="index"></slot>
+            <div v-else class="step-node-default">
+              <div class="step-node-default-icon" style="width: 8px;height: 8px;border-radius: 50%;"></div>
+            </div>
+          </template>
+        </div>
+        <div class="text-wrapper">
+          <slot v-if="$scopedSlots.content" name="content" :index="index" :step="step"></slot>
+          <template v-else>
+            <div class="name">{{step.name}}</div>
+            <div class="desc" v-if="step.text">{{step.text}}</div>
+          </template>
+        </div>
+      </div>
+      <div class="bar" :class="barClassRender" :style="$_getStepSizeForStyle(index)" :key="barKey(index)">
+        <i class="bar-inner" v-if="progress[index]" :style="$_barInnerStyle(index)"></i>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Steps",
+  props: {
+    steps: {
+      type: Array,
+      default: function() {
+        /* istanbul ignore next */
+        return [];
+      }
+    },
+    current: {
+      type: Number,
+      default: 0,
+      validator(val) {
+        return val >= 0;
+      }
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    transition: {
+      type: Boolean,
+      default: false
+    },
+    verticalAdaptive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function() {
+    return {
+      initialed: false,
+      progress: [],
+      stepsSize: [],
+      currentLength: 0,
+      duration: 0.3,
+      timer: null
+    };
+  },
+  computed: {
+    stepsClassRender: function() {
+      return {
+        "zui-steps-vertical": this.direction == "vertical",
+        "zui-steps-horizontal": this.direction == "horizontal",
+        "vertical-adaptive":
+          this.direction == "vertical" && this.verticalAdaptive,
+        "no-current": this.currentLength % 1 !== 0
+      };
+    },
+    barClassRender: function() {
+      return [this.direction == 'horizontal' ? 'horizontal-bar' : 'vertical-bar']
+    },
+    $_barInnerStyle: function() {
+      var progress = this.progress;
+      var self = this;
+      return function(index) {
+        var transform =
+          self.direction == "horizontal"
+            ? '(' + (progress[index]["len"] - 1) * 100 + '%, 0, 0)'
+            : '(0, ' + (progress[index]["len"] - 1) * 100 + '%, 0)';
+        return {
+          transform: 'translate3d' + transform,
+          transition: 'all ' + progress[index]["time"] + 's linear'
+        };
+      };
+    }
+  },
+  watch: {
+    current: function(val, oldVal) {
+      var currentStep = this.$_formatValue(val);
+      var newProgress = this.$_sliceProgress(currentStep);
+      if (this.transition) {
+        var isAdd = currentStep >= oldVal;
+        var self = this;
+        this.timer && clearTimeout(this.timer);
+        this.timer = setTimeout(function() {
+          self.$_doTransition(function(newProgress, isAdd, len) {
+            if (
+              (isAdd && len > self.currentLength) ||
+              (!isAdd && len < self.currentLength)
+            ) {
+              self.currentLength = len;
+            }
+          });
+        }, 100);
+      } else {
+        this.progress = newProgress;
+        this.currentLength = currentStep;
+      }
+    }
+  },
+  created: function() {
+    var currentStep = this.$_formatValue(this.current);
+    this.currentLength = currentStep;
+    this.progress = this.$_sliceProgress(currentStep);
+  },
+  mounted: function() {
+    this.$_initStepSize();
+  },
+  updated: function() {
+    this.$nextTick(function() {
+      this.$_initStepSize();
+    });
+  },
+  methods: {
+    stepKey: function(index) {
+      return "steps-" + index;
+    },
+    barKey: function(index) {
+      return "bar-" + index;
+    },
+    toArray: function(list, start) {
+      start = start || 0;
+      var i = list.length - start;
+      var ret = [];
+      while (i--) {
+        ret.unshift(list[i + start]);
+      }
+      return ret;
+    },
+    // MARK: private methods
+    $_initStepSize: function() {
+      if (this.direction != "vertical" || this.verticalAdaptive) {
+        return;
+      }
+      var iconWrappers = this.$el.querySelectorAll(".icon-wrapper");
+      var textWrappers = this.$el.querySelectorAll(".text-wrapper");
+      var self = this;
+      var stepsSize = this.toArray(textWrappers).map(function(wrapper, index) {
+        var stepHeight = wrapper.clientHeight;
+        var iconHeight = iconWrappers[index].clientHeight;
+        if (index == textWrappers.length - 1) {
+          // The last step needs to subtract floated height
+          stepHeight -= iconHeight;
+        } else {
+          // Add spacing between steps to prevent distance too close
+          // stepHeight += 40
+          // 这里减小空白间隙，使其看起来更紧凑
+          stepHeight += self.stepHeightFix == 0 ? self.stepHeightFix : self.stepHeightFix || -15;
+        }
+        return stepHeight > 0 ? stepHeight : 0;
+      });
+      if (stepsSize.toString() != this.stepsSize.toString()) {
+        this.stepsSize = stepsSize;
+      }
+    },
+    $_getStepSizeForStyle: function(index) {
+      var size =
+        this.direction == "vertical" && !this.verticalAdaptive
+          ? this.stepsSize[index]
+          : 0;
+      return size
+        ? {
+            height: size + 'px'
+          }
+        : null;
+    },
+    $_getStepStatusClass: function(index) {
+      var currentLength = this.currentLength;
+      var status = [];
+      if (index < currentLength) {
+        status.push("reached");
+      }
+      if (index == Math.floor(currentLength)) {
+        status.push("current");
+      }
+      return status.join(" ");
+    },
+    $_formatValue: function(val) {
+      if (val < 0) {
+        return 0;
+      } else if (val > this.steps.length - 1) {
+        return this.steps.length - 1;
+      } else {
+        return val;
+      }
+    },
+    $_sliceProgress: function(current) {
+      var self = this;
+      return this.steps.slice(0, this.steps.length - 1).map(function(step, index) {
+        var offset = current - index;
+        var progress = self.progress[index];
+        var isNewProgress = progress == undefined;
+        var len, time;
+        if (offset <= 0) {
+          len = 0;
+        } else if (offset >= 1) {
+          len = 1;
+        } else {
+          len = offset;
+        }
+        time =
+          (isNewProgress ? len : Math.abs(progress.len - len)) * self.duration;
+        return {
+          len,
+          time
+        };
+      });
+    },
+    $_doTransition: function(progress, isAdd, step) {
+      var currentLength = isAdd ? 0 : this.currentLength;
+      var self = this;
+      var walk = function(index) {
+        if ((index < progress.length) & (index > -1) && progress[index]) {
+          if (isAdd) {
+            currentLength += progress[index].len;
+          } else {
+            currentLength -= self.progress[index].len - progress[index].len;
+          }
+          setTimeout(function() {
+            index += isAdd ? 1 : -1;
+            step(currentLength);
+            walk(index);
+          }, progress[index].time * 1000);
+        }
+        self.$set(self.progress, index, progress[index]);
+      };
+      walk(isAdd ? 0 : progress.length - 1);
+    }
+  }
+};
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
--
libgit2 0.21.0