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