loading加载的代码

<!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>javascript