<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } div{ width: 400px; height: 400px; border: 1px solid red; margin: 0 auto; } canvas{ background: aquamarine; } </style> </head> <body> <div style=" padding-left: 600px;" id=‘loading_panl’> <lable id="lbl_Info"></lable> <canvas id="test" width=200 height=200></canvas> </div> <script type="text/javascript"> var deg = 0; //全局变量 用来存放 canvas 绘制的角度 var test = function(deg,test){ //角度、 canvasid //获取画布 对象 var canvas2d = document.getElementById("test").getContext("2d"); //canvas绘制圆形进度 var r = deg*Math.PI/180; //绘制文字 filltext( text，x,y) canvas2d.fillText("正在玩命加载中. . . . ",65,140); //填充颜色 canvas2d.fillStyle = "#B2DFF5"; //由于想让圆形动起来 就要一直擦除 重绘 // 区域自己控制一下 //手机需要在有限的屏幕中做很多事情 还是精确到像素吧（有残留的一点点没清掉 请将像素加上 0.5） canvas2d.clearRect(0,0,200,122); //开始绘制 canvas2d.beginPath(); //canvas的外圆颜色 canvas2d.strokeStyle = "#84F2ED"; //圆外框的宽度 别太宽 有点恶心 canvas2d.lineWidth = 2.5; //canvas绘制弧形 canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false); canvas2d.fill(); canvas2d.stroke(); canvas2d.closePath(); }; //使用定时器让html5 canvas绘制圆形进度动起来 //此时你可以使用 ajax 来做请求了 Example: $.ajax({ url:"", data:{}, success(data) { // clearInterval(t); //隐藏之前那个DIV咯 }, error: { // 提示页面那个lable 提示加载失败的原因 <要分手的时候 理由即使牵强都没办法> } }) var t = setInterval(function(){ //循环给 圆弧加角度 //如果你需要快就加的多一点吧 deg+=2; //调用绘制方法 test(deg); //转一圈还是N圈就看你的喜好了。 if(deg>=365){ deg=0; } },20); $.ajax({ type:"get", url:"", async:true }); </script> </body></html>