微信小程序:实现节点进度条的效果；正在完成的节点有动态循环效果；横向，纵向排列

参考说明

微信小程序实现流程进度功能 - 知乎

上面的为一个节点进度条的例子，但并不完整，根据上述代码，进行修改完善，实现其效果

横向效果

代码

wxml

<view class='order_process'>
  <view class='process_wrap' wx:for="{
  {processData}}" wx:key="index">
    <view class='process'>
      <view class='process_line' style="background:{
  {item.start}}"></view>
      <image class="process_icon {
  {item.icon === icon2 ? 'rotate-icon' : ''}}" src="{
  {item.icon}}"></image>
      <view class='process_line' style="background:{
  {item.end}}"></view>
    </view>
    <text class='process_name'>{
  {item.name}}</text>
  </view>
</view>

wxss

.order_process {
  display: flex;
  flex-wrap: nowrap;
  padding: 10rpx 10rpx 20rpx 10rpx;
  background-color: #fff;
}
.process_wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}
.process {
  display: flex;
  align-items: center;
  width: 100%;
}
.process_icon {
  width: 35rpx;
  height: 35rpx;
}
.process_line {
  background: #eff3f6;
  flex: 1;
  height: 5rpx;
}
.process_name {
  font-size: 24rpx;
}
/* 定义旋转动画 */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 应用到 .rotate-icon 类 */
.rotate-icon {
  animation: rotate360 5s linear infinite; /* 5秒完成一次旋转，线性时间函数，无限循环 */
}

js

Page({
  data: {
    icon1: '../img/process_1.png',
    icon2: '../img/process_2.png',
    icon3: '../img/process_3.png',
    processData: [],//节点信息
  },
  onLoad: function () {
    // 初始化数据 processData
    const data = [{
        name: '节点1',
        start: '#fff',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点2',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点3',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 1
      },
      {
        name: '节点4',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点5',
        start: '#f9d9dd',
        end: '#fff'