小程序实现流程进度条功能

<view class="progress">
      <view class="radius rad_1 radius_active">1</view>
      <view class="radius rad_2 radius_active">2</view>
      <view class="radius rad_3">3</view>
      <progress percent="50" activeColor="#F86221" backgroundColor="#E0E2E7" stroke-width="4" class="pro_border"/>
    </view>

/* progress */
.edit_content .progress{
  width:494rpx;
  height: 60rpx;
  margin:auto;
  position: relative;
  display: -webkit-flex;
  align-items: center;
}
.progress .pro_border{
  width:100%;
}
.progress .radius{
  position: absolute;
  width:60rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 50%;
  background: #E0E2E7;
  font-family: PingFangSC-Semibold;
  font-size: 30rpx;
  color: #737586;
  text-align:center;
  top:0;
}
.progress .radius_active{
  background: #F86221;
  color:#fff;
}
.progress .rad_1{
  left:0;
}
.progress .rad_2{
  left:217rpx;
}
.progress .rad_3{
  right:0;
}