image.png

.progress_box {
    width: 100%;
    height: 10px;
    background: #EEEEEE;
    border-radius: 10px;
    position: relative;
}

.progress_box_after {
    width: 1%;
    min-width: 0%;
    max-width: 100%;
    height: 10px;
    background: #1677FF;
    border-radius: 10px;
    display: block;
    position: relative;
    top: 0;
}

.progress_box_num {
    width: 50px;
    height: 30px;
    border-radius: 5px;
    background: #1677FF;
    text-align: center;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 30px;
    position: absolute;
    right: -25px;
    top: -40px;
}

.progress_box_num::before {
    content: '';
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    bottom: -18px;
    left: 15px;
    border-color: #1677FF transparent transparent;
}

<div class="progress_box">
    <div class="progress_box_after" :style="{ width:progressNum }">
        <div class="progress_box_num">{{progressNum}}</div>
    </div>
</div>

 progressNum: "0%",