如何自定义进度条？弹性布局+div

css代码如下：

chart-class1 {
            height: 50px;
            padding: 7px 37px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 21px;
        }
        .chart-class1>div .process-top{
            height: 6px;
            margin-bottom: 10px;
            position: relative;
        }
        .process-top>div>div:nth-child(2){
             background: #ffaf50;
             border-radius: 3px 0 0 3px;
            z-index: 4;
         }
        .process-top>div>div:last-child{
            background: #0575fe;
            border-radius: 0px 3px 3px 0;
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
        .chart-class1>div>div:last-child{
            justify-content: space-between;
        }
 .bg-process-end{/*可以不要*/
            background: url(./img/index2-img/process.png) no-repeat;
            width: 58px;
            height: 29px;
            background-size: 100% 100%;
            position: absolute;
            top: -11px;
            z-index: 5;
            margin-left: -56px;
        }

<div id="" class="chart-class1" style="position: relative">
      <div style="width: 100%;height: 100%;">
         <div class="process-top">
             <div class="flex-row" style="width: 100%;height: 100%;position: relative">
                 <div class="bg-process-end" :style="{left: this.data +'%'}"></div>//可以不用这行
                 <div :style="{width: this.data+'%'}"></div>
                 <div style="width: 100%"></div>
            </div>
        </div>
       <div class="flex-row">
           <div class="num-percent">{{data}}%</div>//data是vue中定义的
               <div class="flex-row">
                    <div class="flex-row blue-legend1-left">
                         <div></div>
                         <div>某某</div>
                     </div>
              		<div class="flex-row yellow-legend1-left">
                         <div></div>
                         <div>某某</div>
                    </div>
             </div>
       </div>
   </div>
</div>