小程序中动效进度条

[本文已参与「新人创作礼」活动，一起开启掘金创作之路。]

效果

 <view class="ottery_bottom_jdt_win">
      <view class="ottery_bottom_jdt_box">
            <view class="jdt" style="width:80%"></view>
            <view class="number">80%</view>
      </view>
      <view class="huan"><view></view></view>
</view>

.ottery_bottom_jdt_win{
  width: 85%;
  height: 40rpx;
  display: block;
  margin: 0 auto;
  margin-top: 50rpx;
  margin-bottom: 30rpx;
  position: relative;
}
.ottery_bottom_jdt_box{
  width: 90%;
  height: 20rpx;
  border: 2px solid #E60012;
  border-radius: 50rpx;
  position: relative;
}
.ottery_bottom_jdt_box .number{
  width: 61rpx;
  height: 72rpx;
  position: absolute;
  right: -6.3%;
  top: -65rpx;
  z-index: 9;
  background-color: red;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* background-position: 50%; */
  font-size: 20rpx;
  text-align: center;
  color: #fff;
  line-height: 65rpx;
}
.ottery_bottom_jdt_box >image{
  width: 41rpx;
  height: 52rpx;
 
}
.ottery_bottom_jdt_box .jdt{
  height: 20rpx;
  background-image: linear-gradient(
    45deg,
    rgb(255,1,1) 25%,
    rgba(255,1,1, 0.3) 0,
    rgba(255,1,1, 0.3) 50%,
    rgb(255,1,1) 0,
    rgb(255,1,1) 75%,
    rgba(255,1,1, 0.3) 0
  );
  background-size: 10px 10px;
  animation: progress_bar 10s infinite linear;
}
@keyframes progress_bar {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 500px;
  }
}
.ottery_bottom_jdt_win .huan{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border:2px solid #FE0808;
  position: absolute;
  right: 5%;
  top: -8rpx;
  background: #fff;
}