1 /*--------------------------------------------------------------------
\r
2 *JAVASCRIPT "FakeLoader.js"
\r
3 *Version: 1.1.0 - 2014
\r
4 *author: João Pereira
\r
5 *website: http://www.joaopereira.pt
\r
7 -----------------------------------------------------------------------*/
\r
10 $.fn.fakeLoader = function(options) {
\r
12 $.fn.settings = $.extend({
\r
13 timeToHide:10, // Default Time to hide fakeLoader
\r
14 pos:'fixed',// Default Position
\r
15 top:'0px', // Default Top value
\r
16 left:'0px', // Default Left value
\r
17 width:'100%', // Default width
\r
18 height:'100%', // Default Height
\r
19 zIndex: '999', // Default zIndex
\r
20 bgColor: '#2ecc71', // Default background color
\r
21 opacity:'0.6',//默认透明度
\r
23 spinner:'spinner1', // Default Spinner
\r
24 imagePath:'' // Default Path custom image
\r
27 $.fn.Setopacity=function(opacity){
\r
28 $(".loadingbackground").fadeTo("slow",opacity);
\r
30 $.fn.SetTimeToHide=function(timetohide){
\r
32 el.settings.timeToHide=timetohide;
\r
33 if(!!timer)clearTimeout(timer);
\r
36 });//fadeTo("fast",el.settings.opacity);
\r
37 $(".loadingbackground").fadeTo(1,el.settings.opacity);
\r
38 setTimeout(function(){
\r
39 el.fadeOut();//fadeTo("slow",0);
\r
40 }, el.settings.timeToHide);
\r
42 $.fn.setToHide=function(){
\r
44 if(!!timer)clearTimeout(timer);
\r
45 el.fadeOut();//fadeTo("slow",0);
\r
50 //Customized Spinners
\r
51 var spinner01 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
52 var spinner02 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
53 var spinner03 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div></div>';
\r
54 var spinner04 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner4"></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
55 var spinner05 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
56 var spinner06 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
57 var spinner07 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
\r
61 'position':el.settings.pos,
\r
62 'width':el.settings.width,
\r
63 'height':el.settings.height,
\r
64 'top':el.settings.top,
\r
65 'left':el.settings.left
\r
69 el.css(initStyles);
\r
71 el.each(function() {
\r
72 var a = el.settings.spinner;
\r
100 //Add customized loader image
\r
102 if (el.settings.imagePath !='') {
\r
103 el.html('<div class="fl"><img src="'+el.settings.imagePath+'"><span>'+el.settings.text+'</span></div>');
\r
108 //Time to hide fakeLoader
\r
109 if(el.settings.timeToHide>0){
\r
110 timer=setTimeout(function(){
\r
111 el.fadeOut();//fadeTo("slow",0);
\r
112 }, el.settings.timeToHide);
\r
116 //'backgroundColor':el.settings.bgColor,
\r
118 'zIndex':el.settings.zIndex
\r
121 $(".loadingbackground").css(initStyles).css({
\r
122 'backgroundColor':el.settings.bgColor,
\r
123 'opacity':el.settings.opacity,
\r
124 'zIndex':el.settings.zIndex+1
\r
126 $(".loadingTip").css(initStyles).css({
\r
127 //'backgroundColor':el.settings.bgColor,
\r
128 'zIndex':el.settings.zIndex+2
\r
131 }; // End Fake Loader
\r
135 function centerLoader() {
\r
137 var winW = $(window).width();
\r
138 var winH = $(window).height();
\r
140 var spinnerW = $('.fl').outerWidth();
\r
141 var spinnerH = $('.fl').outerHeight();
\r
142 var fW = $('.f2').outerWidth();
\r
143 var left=(winW/2)-(spinnerW/2);
\r
144 var left2=(winW/2)-(fW/2);
\r
145 left=left>0?left:winW/2-20;
\r
146 left2=left2==0||fW==0?left:left2;
\r
147 //left2=left2>0?left2:winW/2-40;
\r
149 console.log("loding gif:"+left+" text:"+left2);
\r
151 'position':'absolute',
\r
153 'top':(winH/2)-(spinnerH/2)
\r
156 'position':'absolute',
\r
158 'top':(winH/2)+(spinnerH/2)
\r
162 $(window).load(function(){
\r
164 $(window).resize(function(){
\r