步骤进度条

效果图

HTML（目前是微信小程序 h5换成div即可）

<view class='wrap1'>
 <view class="stepInfo">
  <view class="steps view_ul">
    <view class="view_li {{msg.finishRate ==0? 'active' : ''}}">下发</view>
    <view class=" view_li {{msg.finishRate >=1 && msg.finishRate<100? 'active' : ''}}">进行中  </view>
    <view class="view_li {{msg.finishRate ==100? 'active' : ''}}">完成</view>
  </view>
</view>

注释：在某一步添加active类名即可

css

.stepInfo{
  width: 750rpx;
  height: 295rpx;
  background: #FF665B;
  border-radius: 2rpx;
  z-index: -1;
  opacity: 0.8;
}
.steps {
  position: relative;
  top: 80rpx;
  counter-reset: step;  /*创建步骤数字计数器*/
}
/*步骤描述*/
.steps .view_li {
  list-style-type: none;
  text-align: center;
  width: 33%;
  position: relative;
  float: left;
  font-size: 24rpx;
  color: #fff;
  }

  /*步骤数字*/
  .steps .view_li:before {
 display: block;
 content: counter(step); /*设定计数器内容*/
 counter-increment: step;  /*计数器值递增*/
 width: 32px;
 height: 32px;
 background-color: #FFF;
 line-height: 32px;
 border-radius: 32px;
 font-size: 24rpx;
 color: #FF665B;
 text-align: center;
 font-weight: 700;
 margin: 0 auto 8px auto;
 z-index: 1;
  }

  /*连接线*/
  .steps .view_li ~ .view_li:after {
 content: '';
 width: 100%;
 height: 2px;
 background-color: #fff;
 position: absolute;
 left: -50%;
 top: 15px;
  z-index: -1;/* 放置在数字后面 */
  }

  /*将当前/完成步骤之前的数字及连接线变绿*/
  .steps .view_li.active:before,
  .steps .view_li.active:after {
    background-color: #FFF;
 }

 /*将当前/完成步骤之后的数字及连接线变灰*/
 .steps .view_li.active ~ .view_li:before,
 .steps .view_li.active ~ .view_li:after {
   background-color: #bfbfbf;
     }

作者：gaochengxin