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%",
