使用CSS实现水波球效果（单个的水波球）
效果如下：

<template>
    <div class="indicator" ref="indicator" :style="`border-color:${borderCol}`">
        <span  class="text">{{ completion }}% </span>
        <!-- for="completion" --> 
        <div class="ball" :style="`top: ${topValue}%;background-color:${borderCol};`">
        </div>
     
    </div>
</template>
<script>
export default {
    name: 'Ball',
    components: {

    },
    mixins: [],
    props: {
        completion: {
            type: Number,
            default: 50
        },
        borderCol:{
            type: String,
            default: '#00A4F1'
        },
        index:{
            type: Number,
            default: 0
        }
    },
    computed:{
        topValue(){
            console.log("this.completion",this.completion);
            return 120 -this.completion;
        }
    },
    data() {
        return {

        }
    },
    watch: {
    },
    mounted() {
    },
    methods: {
       
    }
};
</script>
<style lang='less' scoped>
.indicator {
    --completion: 30%;
    --offset: 20px;
    --waterBck:#00AFFF;
    --borderCol:#00A4F1;
    height: 60px;
    width: 180px;
    position: relative;
    border-radius: 30px;
    border: 2px solid var(--borderCol);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    // background: white;

    .ball {
        display: block;
        width: 200px;
        height: 200px;
        content: "";
        background-color: var(--waterBck);
        border-radius: 40%;
        position: absolute;
        left: 50%;
        top: calc(100% - var(--completion) + var(--offset));
        translate: -50% 0;
        -webkit-animation: spin 5s linear infinite;
        animation: spin 8s linear infinite;
    }
}

output {
    z-index: 1;
    font-family: system-ui;
    font-size: 20px;
    color: #333;
}

// .indicator

@-webkit-keyframes spin {
    100% {
        rotate: 360deg;
    }
}

@keyframes spin {
    100% {
        rotate: 360deg;
    }
}
.text{
    z-index: 2;
    color: #ffffff;
    text-align: center;
    font-family: "Barlow";
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;
}


</style>