vue实现斑马线进度条

看下效果： 

用到的图片：

先保存进度条的两种背景，第一种是底色黑色，第二种是用于展示进度的米黄色背景

       

 整体思想：

用一个小单元作为背景图片，然后在style里面设置进度条的长度 这样的话背景图片就会自动填充然后形成一条斑马线，从而实现进度条。

html:

                <div class="progress">
                    <span>{
   
   {progress}}%</span>
                    <div class="p_bj">
                        <div class="p_layer" :style="{width:progress+'%'}">
                        </div>
                    </div>
                </div>

less:

      .progress {
            width: 100%;
            height: 60px;
            margin-top: 12px;
            background-image: url("../../../../assets/images/newImg/progress_bg.png");
            background-size: 100% 100%;
            position: relative;
            display: flex;
            align-items: center;
            span {
                position: absolute;
                left: 0;
                top: -8px;
                color: #b06c6c;
                font-size: 22px;
                font-weight: bold;
            }
            .p_bj {
                width: 96%;
                margin-left: 5px;
                height: 28px;
                background-position: 10px 10px;
                background-image: url("../../../../assets/images/newImg/p_2.png");
                .p_layer {
                    width: 38%;
                    height: 28px;
                    background-image: url("../../../../assets/images/newImg/p_1.png");
                    background-position: 10px 10px;
                }
            }
        }

data:

改变这个progress的值就可以实现进度的变化