可扩展进度条，商城常用！

通过增加或删除 l-current、l-current-unit、l-arrow-complete来修改状态，l-process-4 为显示四个状态的进度条，可改变的数字有1、2、3、4。

<div class="l-process l-process-4 clear-fix l-offset-span4" >
    <span class="l-unit l-current">填写用户名</span>
    <span class="l-arrow l-current-unit l-arrow-complete">
        <span class="l-next"></span>
        <span class="l-prev"></span>
    </span>
    <span class="l-unit l-current">验证身份</span>
    <span class="l-arrow l-current-unit l-arrow-complete">
        <span class="l-next"></span>
        <span class="l-prev"></span>
    </span>
    <span class="l-unit l-current">设置新密码</span>
    <span class="l-arrow l-current-unit ">
        <span class="l-next"></span>
        <span class="l-prev"></span>
    </span>
    <span class="l-unit">完成</span>
</div>

 

.process {
  height: 26px;
}
.l-process.l-process-2 .l-unit {
  width: 49%;
  *width: 48.9%;
}
.l-process.l-process-3 .l-unit {
  width: 32%;
  *width: 31.9%;
}
.l-process.l-process-4 .l-unit {
  width: 23.5%;
  *width: 23.4%;
}
.l-process.l-process-5 .l-unit {
  width: 18.4%;
  *width: 18.3%;
}
.l-process .l-current {
  background: #00adee !important;
}
.l-process .l-current-unit.l-arrow-complete {
  background: #00adee !important;
}
.l-process .l-unit {
  float: left;
  display: inline;
  height: 26px;
  background: #ccc;
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.85;
}
.l-process .l-arrow {
  position: relative;
  float: left;
  display: inline;
  width: 2%;
  height: 26px;
  overflow: hidden;
  background: #ccc;
}
.l-process .l-arrow .l-next {
  position: absolute;
  display: block;
  left: 0;
  top: -3px;
  height: 0;
  width: 0;
  overflow: hidden;
  border: solid 10px transparent;
  border-width: 16px 10px;
  border-left-color: #fff;
  _border-color: #000;
  _filter: chroma(color=#000000);
  _border-left-color: #fff;
}
.l-process .l-current-unit .l-prev {
  border-left-color: #00adee !important;
}
.l-process .l-arrow .l-prev {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  border: solid 10px transparent;
  border-width: 13px 8px;
  border-left-color: #ccc;
  _border-color: #000;
  _filter: chroma(color=#000000);
  _border-left-color: #ccc;
}