html 

     <view class="water"><view class="text">完成率{{list.finish}}%</view><view class="img" style="height: {{list.finish}}%"><image src="../../image/water.jpg" mode="" /><image src="../../image/water2.jpg" mode="" /><image src="../../image/water.jpg" mode="" /><image src="../../image/water2.jpg" mode="" /></view></view>

 less

// 水球样式
.water {margin-top: 20rpx;border: 2px solid #45affa;width: 200rpx;height: 200rpx;border-radius: 50%;overflow: hidden;position: relative;// 球内文字.text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;z-index: 1;text-align: center;color: rgb(255, 123, 0);}
// 波浪.img {display: flex;justify-content: start;width: 300%;background-color: #0096ff;//控制完成率显示 定义到行内样式动态修改height: 1%;position: absolute;bottom: 0;animation: water 2s linear infinite;image {width: 100%;height: 20rpx;}}
}// 水波动画
@keyframes water {0% {transform: translateX(-300rpx);}100% {transform: translateX(-0rpx);}
}

js

获取数据赋值就行