微信小程序 进度条progress 根据不同的进度显示不同的渐变色

实现效果

实现代码

<progress class="{{item.percent == 30 ? 'progress30' : item.percent == 60 ? 'progress60' : 'progress90'}}" percent="{{item.percent}}" backgroundColor="#E5E5E5" duration="30" border-radius="15" active stroke-width="18"></progress>

 渐变样式

.progress30 .wx-progress-inner-bar {
  border-radius: 30rpx !important;
  background: linear-gradient(to right, #FE0000, #FF840B) !important;
}
.progress60 .wx-progress-inner-bar {
  border-radius: 30rpx !important;
  background: linear-gradient(to right, #FE0000, #FF840B, #FFE033) !important;  
}
.progress90 .wx-progress-inner-bar {
  border-radius: 30rpx !important;
  background: linear-gradient(to right, #FE0000, #FF840B, #FFE033, #05EFEC, #81E0FF) !important;
}