水波流动进度条。

其实原理很简单，看下面的就知道了，给div一个圆角，然后给他一个keyframes动画，一直在旋转就可以了。css具体F12看源码。

怎么让他跟着数字来改变位置呢？给一个data-num属性，然后js修改一下top值就可以了，大概算了一下，完全淹没top为0，完全看不见的时候，top大概为108，比例为1.08，结果是(100-num)*1.08。

var con = document.querySelectorAll('.WavePro');  
;[].forEach.call(con,function(o){  
    o.querySelector('.turn').style.top = Math.floor((100 – o.dataset.num)*1.08) +'%';  
}); 
01.
02.
03.
04.

还可以通过svg来实现。