css制作渐变效果百分比进度条

         <div class="con-footer">

    
           <div class="con-image-text"><span>1</span><span class="qiti-right">796&nbsp;正常</span></div>
    
           <div class="progress-out">
    
             <div class="progress-in" :style="{width:'80%'}">
    
               <div class="progress-circle" ></div>
    
             </div>
    
           </div>
    
           <div class="con-image-text"><span>2</span><span class="qiti-error">132&nbsp;异常</span></div>
    
           <div class="progress-out">
    
             <div class="progress-in progress-error" :style="{width:'100%'}">