Loading loading widget, user can choose HTML format or canvas format, customize loading picture, canvas color collocation can be based on personal preference

;(function ($) {
$. Loading = function (options) {
Burst plug-in default value
$. Loading.defaults = {
Speed:200,//eject Layer fade-out Speed
Bgcolor: ' Rgba (0,0,0,.7) ',//mask layer color, requires RGBA format, default black 0.5 transparency
Type: html,//default HTML style, or canvas
Msg: ' Loading ... ',//default loading information
Loadpicnum:2,//for HTML when loading picture which kind;
Canvassupport:false,//whether support HTML5 Canvas
Loadtimer:3000,//mask layer hidden time, only valid in HTML format
Autohide:false,//whether Auto Hide
Random:false,//whether random loading pictures, only valid in HTML format
Callback:function () {},//default callback function
Canvasfillcolor: "#009600",//default Canvas Fill Color
Canvasbackcolor: "#ccc",//default Canvas Background
canvasfontcolor: "red"//default Canvas Font Color
};
var opts = $.extend ({}, $. loading.defaults, options);;
(function () {
If (window.applicationcache) {
Canvassupport = true;
} else {
Canvassupport = false;
}
If (opts.type && Opts.type = = = = "html") {
Pagerender ("html");
};
If (opts.type && Opts.type = = = = "canvas") {
If (canvassupport) {
Pagerender ("canvas");
} else {
Pagerender ("html");
}
}
})();

function Pagerender (type) {
var html = ';
HTML + = ' <div class= "loadingbox" > ";

if (type = = = "html") {
If (!! Opts.random) {
Opts.loadpicnum = Math.ceil (math.random () * 53);
}
HTML + = ' <div class= "toppart" ></div> "
};
if (type = = = "canvas") {
HTML + = ' <div class= "toppart" ><canvas id= "mycanvas" ></canvas></div> ";
}
HTML + = ' <p class= ' font ' > ' + opts.msg + ' </p> ';
HTML + = ' </div> ';

var img = new Image ();
Img.onload = function () {
If ($ (". loadingbox"). length > 0) {
$ (". loadingbox"). Remove ();
}
$ (' Body '). Append (html);
RenderStyle (type);
}
IMG.SRC = "loading/loading" + opts.loadpicnum + ". gif";
};

function RenderStyle (type) {
var iw = Document.documentElement.clientWidth | | document.body.clientWidth;
var loadbixw = IW > 320? 200:160;
var PicH = $ ('. toppart '). height () > 90? : $ ('. toppart '). height ();
var ml = (iw-loadbixw)/2;

$ ('. loadingbox '). CSS ({
Width:loadbixw + "px",
ZIndex: ' 999999 ',
Position: ' fixed ',
background:opts.bgcolor,
Borderradius: ' 15px ',
Cursor: ' Pointer ',
left:ml + ' px ',
Top: "20%"
});
$ ('. Font '). CSS ({
TextAlign: "center",
FontSize: ' 16px ',
Color: ' #fff ',
Margin: "5px 0 10px 0"
});
$ ('. toppart '). CSS ({
Width: "100%",
TextAlign: "center",
Paddingtop: ' 10px '
});
if (type = = = "html") {

If (picH < && PicH > 0) {
$ ('. toppart '). find (' img '). CSS ({
MaxWidth: "100%",
Padding: "20px 0"
});
}
If (picH >= 90) {
$ ('. toppart '). find (' img '). CSS ({
MaxWidth: "100%",
Height:pich + "px"
});
}
If (opts.autohide)
SetTimeout (function () {
Closeloading (opts.callback);
}, Opts. loadtimer);
}
if (type = = = "canvas") {
var canvas = document.getElementById (' MyCanvas ');
Canvas.width = 120;
Canvas.height = 120;
If (canvas.getcontext) {
var cxt = Canvas.getcontext (' 2d '),
W = canvas.width,
H = canvas.height,
deg = 0,
New_deg = 0,
diff = 0,
Loop
Reloop
Text
text_w;

function init () {

Cxt.clearrect (0, 0, W, H);
Cxt.beginpath ();
Cxt.strokestyle = opts.canvasbackcolor;
Cxt.linewidth = 5;
Cxt.arc (w/2, h/2, 0, Math.PI * 2, false);
Cxt.stroke ();

var r = deg * math.pi/180;
Cxt.beginpath ();
Cxt.strokestyle = opts.canvasfillcolor;
Cxt.linewidth = 5;
Cxt.arc (w/2, h/2, 0-90 * math.pi/180, r-math.pi * 90/180, false);
Cxt.stroke ();

Cxt.fillstyle = opts.canvasfontcolor;
Cxt.font = "25px Arial";
Text = Math.floor (deg/360 * 100) + "%";
Text_w = Cxt.measuretext (text). width;
Cxt.filltext (text, w/2-text_w/2, H/2 + 10);
};

function Draw () {
New_deg = 360;
diff = new_deg-deg;
loop = SetInterval (to, 5000/diff);

};

function to () {
if (deg = = New_deg) {
Clearinterval (loop);
If (opts.autohide) closeloading (opts.callback);

}
If (deg < New_deg) {
deg++;
}
Init ();
}
Draw ();

}
}

};

function Closeloading (callback) {
$ ('. loadingbox:visible '). fadeOut (opts.speed);
If (typeof callback = = = = "function") {
Callback ();
}
};
};
}) (jQuery);

Demo

$. Loading ({
Type: "html",
speed:200,
loadpicnum:9,
autohide:false,
Bgcolor: ' #666666 '
});

Loading loading widget, user can choose HTML format or canvas format, customize loading picture, canvas color collocation can be based on personal preference