效果截图如下：

部分js实现代码(完整代码请参考下载链接中的压缩包文件)：

function drawCircular(ctx,width, height, x, y, img,sx,sy) {
  var avatarurl_width = width;
  var avatarurl_heigth = height;
  var avatarurl_x = x;
  var avatarurl_y = y;
  ctx.save();
  ctx.beginPath();
  ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

  ctx.fillStyle = "#fff";
  ctx.fill();

  ctx.strokeStyle="#33ccff";
  ctx.stroke();
  ctx.closePath();

  ctx.clip();
  ctx.drawImage(img, sx,sy,240,240,avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
  // ctx.drawImage(img,0,0,320,240,0,0,120,120 );
  ctx.textAlign="center";
  ctx.textBaseline="top";
  ctx.font = '20px 微软雅黑';//  绘制字体的大小和系列
  ctx.fillStyle = "#000";//文字的颜色
  ctx.fillText(processInt+"%",60,60); 
  ctx.restore();
}

  var imgSrc=document.getElementById('imgSrc');
  var imgSrc=new Image();
  imgSrc.src="loading_wave.png"; 
  var myCanvas = document.getElementById('myCanvas');
  var ctx = myCanvas.getContext("2d");
  var sx=0,sy=-230,processText="0",processInt=0;
  var id1=setInterval(function(){
    if(sx>=340)sx=0;
    sx=sx+10;  
    drawCircular(ctx,120,120,0,0,imgSrc,sx,sy);
  },100);
  
  var id2=setInterval(function(){
  if(processInt<100){
  processInt++;
  }
  else{
  	//processInt=100;
  	//clearInterval(id1); 
  	clearInterval(id2);
  }
  if(sy>=1){
  	//sy=-230;   
  	//clearInterval(id1); 
    //clearInterval(id2);
    }else{    	
    	sy=sy+3;
    }
  },150);

本网代码下载地址：

wait_loading_wave.zip