css3动画制作渐变色进度条

先上效果图：

代码如下:

<div class="progress">
     <div class="progress-bar" style="width:73.9%">
          <div class="progress-value">73.9%</div>
     </div>
</div>

css如下：

 .progress{
    margin-top: 12px;
    height: 12px;
    background:rgba(0,151,250,0.1);
    width: 95%;
  }
  .progress .progress-bar{
    box-shadow: none;
    border-radius: 5px;
    position: relative;
    -webkit-animation: animate-positive 2s;
    animation: animate-positive 2s;
    height: 12px;
    background:linear-gradient(270deg,rgba(0,156,255,1) 0%,rgba(0,156,255,0) 100%);   //渐变色设置
  }
  .progress .progress-bar:after{
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 156, 255, 1);
    positio