SOURCE

function bsStep(i) {
  $('.step').each(function() {
    var a, $this = $(this);
    if (i > $this.find('li').length) {
      console.log('您输入数值已超过步骤最大数量' + $this.find('li').length + '！！！');
      a = $this.find('li').length;
    } else if (i == undefined && $this.data('step') == undefined) {
      a = 1
    } else if (i == undefined && $this.data('step') != undefined) {
      a = $(this).data('step');
    } else {
      a = i
    }
    $(this).find('li').removeClass('active');
    $(this).find('li:lt(' + a + ')').addClass('active');
  })
}

<div class="stepInfo">
  <ul>
    <li>
    </li>
    <li>
    </li>
  </ul>
  <div class="stepIco stepIco1" id="step1">
    1
    <div class="stepText" id="step1Text">
      注册1
    </div>
  </div>
  <div class="stepIco stepIco2" id="step2">
    2
    <div class="stepText" id="step2Text">
      注册2
    </div>
  </div>
  <div class="stepIco stepIco3" id="step3">
    3
    <div class="stepText" id="step3Text">
      注册3
    </div>
  </div>
  <div class="stepIco stepIco4" id="step4">
    4
    <div class="stepText" id="step4Text">
      注册4
    </div>
  </div>
  <div class="stepIco stepIco5" id="step5">
    5
    <div class="stepText" id="step5Text">
      成功
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a,
img {
  border: 0;
}

body {
  background: #fff;
  font: 12px/1.5 Arial, Helvetica, sans-serif, "新宋体";
}

.stepInfo {
  position: relative;
  background: #f2f2f2;
  margin: 30px auto 0 auto;
  width: 96%;
  margin-bottom: 120px;
}

.stepInfo li {
  float: left;
  width: 96%;
  height: 0.15em;
  background: #bbb;
  position: absolute;
  top: 0.5em;
}

.stepIco {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5em;
  background: #ff9f19;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 1.2em;
  position: absolute;
  width: 30px;
  height: 30px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 1.5em;
  border-radius: 50%;
  border: 2px solid rgba(224, 224, 224, 1);
  background-color: #ffd69d;
}

.stepIco1 {
  top: -0.7em;
  left: -1%;
}

.stepIco2 {
  top: -0.7em;
  left: 21%;
}

.stepIco3 {
  top: -0.7em;
  left: 46%;
}

.stepIco4 {
  top: -0.7em;
  left: 71%;
}

.stepIco5 {
  top: -0.7em;
  left: 95%;
}

.stepText {
  color: #ff9f19;
  margin-top: 0.5em;
  width: 4em;
  text-align: center;
  margin-left: -1.4em;
}