.wxml源码：
<view>progress进度条测试 样式</view>
<progress class="{{item.percent == 30 ? 'progress30' : item.percent == 60 ? 'progress60' : 'progress90'}}" percent="60" show-info duration="30" border-radius="15" active stroke-width="18"></progress>
<view class="draw" style="margin-top: 30px;">参与抽奖</view>
.wxss源码：
.draw{margin-left: auto;
margin-right: auto;
width: 120px;
height: 120px;
border-radius: 100px;
text-align: center;
line-height: 120px; color: #fff;
background: rgb(242,69,37);
/* 使用动画：动画名称 动画时常 动画速度*/
animation: draw 1s linear infinite;
}
/* 定义动画 */
@keyframes draw {
0% { box-shadow: 0 0 0 5px rgba(245, 226, 226, 1), 0 0 0 0 rgba(242, 69, 37, 1); }
50% { box-shadow: 0 0 0 10px rgba(245, 226, 226, .5), 0 0 0 0 rgba(242, 69, 37, 0.8); }
100% { box-shadow: 0 0 0 20px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0); }}
.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;
}
