使用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>
