效果图如下 ：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 @-webkit-keyframes spin { 8 from{-webkit-transform: rotate(0deg);transform: rotate(0deg);} 9 to{-webkit-transform: rotate(360deg);transform: rotate(360deg);} 10 } 11 @keyframes spin { 12 from{-webkit-transform: rotate(0deg);transform: rotate(0deg);} 13 to{-webkit-transform: rotate(360deg);transform: rotate(360deg);} 14 } 15 .wave-progress{width:200px;height:200px;margin:10px auto;border: 8px solid #fd6b65;border-radius:50%;background-color: #f8f8f8;box-sizing: border-box;position: relative;} 16 .wave-progress .inner{position: absolute;width:100%;height:100%;border-radius:50%;overflow: hidden; border: 6px solid #ffafac;box-sizing: border-box;z-index: 10} 17 .wave-progress .inner .water{position: absolute;width: 200%;height: 200%;left: -50%;border-radius: 40%;background:rgba(255,175,172,0.3);-webkit-animation:spin 10s linear infinite;animation:spin 10s linear infinite; } 18 .tips{color: #fd6b65;font-size: 28px;line-height: 184px;text-align: center;} 19 20 </style> 21 </head> 22 <body> 23 <div class="wave-progress"> 24 <div class="inner"> 25 <div class="water"></div> 26 <div class="tips">1%</div> 27 </div> 28 </div> 29 </body> 30 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 31 <script type="text/javascript"> 32 var topNum = 100; 33 var timer = setInterval(function(){ 34 $(".water").css({"top":topNum+"%"}); 35 topNum -= 0.05; 36 var text = parseInt(100 - topNum)+"%"; 37 $(".tips").text(text); 38 if(topNum <= 0){ 39 clearInterval(timer); 40 } 41 },1); 42 </script> 43 </html>