将进度条的宽度动态控制，通过css的transition动画来控制

<template><div class="container"><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><div class="text"><span>{{ w }}</span><span>%</span></div></div></div></div></template><script>import floatBtn from '@/components/floatBtn.vue'export default {components:{floatBtn},name: 'houselist-page',data () {return {w:20,img: require("@/assets/nav1.png")}},methods: {}}</script><style>.container{width:100%;height:100vh;display: flex;align-items: center;justify-content: center;}.base-progress {height: 26px;width: 260px;border-radius: 15px;background-color: #e6e4e4;border: 2px solid #999;box-sizing: border-box;
}
.inner {width: 20px;height: 100%;border-radius: 12px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;
}
.inner .text{position: absolute;right: -10px;bottom: 0px;
}</style>