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

<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;
}

最后

以上就是稳重羽毛最近收集整理的关于小程序实现流程进度条功能的全部内容，更多相关小程序实现流程进度条功能内容请搜索靠谱客的其他文章。