<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<style>
@keyframes spin {
50% {
transform: translate(-50%, -101%) rotate(500deg);
}
100% {
transform: translate(-50%, -101%) rotate(1000deg);
}
}
.wave-progress {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
overflow: hidden;
position: relative;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, #07c2b7 13%, #07c2b7 100%);
border-radius: 50%;
}
#wave-mask {
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
border-radius: 40%;
transform: translate(-50%, -101%) rotate(0);
animation: spin 30s linear;
z-index: 20;
background-color: #a9dfdc;
}
#num {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
font-size: 16px;
line-height: 100px;
font-weight: bold;
text-align: center;
z-index: 100;
}
</style>
</head>
<body>
<div class="wave-progress">
<div id="num"></div>
<div class="wave"></div>
<div id="wave-mask"></div>
</div>
<script>
let timerRef = null;
let loading = 50;
let numEle = document.getElementById("num");
let maskEle = document.getElementById("wave-mask");
// window.onload = () => {
// timerRef = window.setInterval(() => {
// const num = loading + 0.49;
// if (num >= 100) {
// loading = 100;
// // clearInterval(timerRef);
// } else {
// loading = num;
// }
numEle.innerHTML = loading >= 100 ? 100 : loading.toFixed(2) + "%"; // 显示两位小数
maskEle.style.top = 100 - loading + "%";
// }, 150);
// };
</script>
</body>
</html>
css+js实现水波纹动画,使用echarts水球图也可以实现,但是项目中水波圆贴边有动画,水球图实现效果不好看,如果有相同需求的小伙伴可以使用以上方法也可以去使用echarts水球图实现。