CSS 如何实现波浪进度球？

Question

CSS 如何实现波浪进度球？

仓乃文 · Accepted Answer

波浪进度球通过多个旋转的不规则圆形 + overflow: hidden 裁剪实现波浪填充效果，配合动画模拟水面波动。

```css
.wave-ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #e0e0e0;
}

.wave-ball::before,
.wave-ball::after {
  content: ";
  position: absolute;
  width: 200%;
  height: 200%;
  top: var(--water-level, 50%);
  left: -50%;
  background: #48dbfb;
  border-radius: 40%;
  animation: wave 4s infinite linear;
}

.wave-ball::after {
  border-radius: 45%;
  animation-duration: 6s;
  opacity: 0.5;
}

@keyframes wave {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
```

补充说明：
- 两个伪元素用不同 border-radius 和动画时长产生层次感
- --water-level 控制波浪高度（百分比），值越小波浪越高
- overflow: hidden + border-radius: 50% 裁剪出圆形
- 适合下载进度、存储空间展示等场景