https://www.110107.com/files/6/oto/js/fakeLoader.js

1/*--------------------------------------------------------------------
2 *JAVASCRIPT "FakeLoader.js"
3 *Version:    1.1.0 - 2014
4 *author:     João Pereira
5 *website:    http://www.joaopereira.pt
6 *Licensed MIT 
7-----------------------------------------------------------------------*/
8(function ($) {
9 
10    $.fn.fakeLoader = function(options) {
11
12        //Defaults
13        var settings = $.extend({
14            timeToHide:1200, // Default Time to hide fakeLoader
15            pos:'fixed',// Default Position
16            top:'0px',  // Default Top value
17            left:'0px', // Default Left value
18            width:'100%', // Default width 
19            height:'100%', // Default Height
20            zIndex: '999',  // Default zIndex 
21            bgColor: '#2ecc71', // Default background color
22            spinner:'spinner7', // Default Spinner
23            imagePath:'' // Default Path custom image
24        }, options);
25
26        //Customized Spinners
27        var spinner01 = '<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';
28        var spinner02 = '<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>';
29        var spinner03 = '<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';
30        var spinner04 = '<div class="fl spinner4"></div>'; 
31        var spinner05 = '<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>'; 
32        var spinner06 = '<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>'; 
33        var spinner07 = '<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>'; 
34
35        //The target
36        var el = $(this);
37
38        //Init styles
39        var initStyles = {
40            'position':settings.pos,
41            'width':settings.width,
42            'height':settings.height,
43            'top':settings.top,
44            'left':settings.left
45        };
46
47        //Apply styles
48        el.css(initStyles);
49
50        //Each 
51        el.each(function() {
52            var a = settings.spinner;
53            //console.log(a)
54                switch (a) {
55                    case 'spinner1':
56                            el.html(spinner01);
57                        break;
58                    case 'spinner2':
59                            el.html(spinner02);
60                        break;
61                    case 'spinner3':
62                            el.html(spinner03);
63                        break;
64                    case 'spinner4':
65                            el.html(spinner04);
66                        break;
67                    case 'spinner5':
68                            el.html(spinner05);
69                        break;
70                    case 'spinner6':
71                            el.html(spinner06);
72                        break;
73                    case 'spinner7':
74                            el.html(spinner07);
75                        break;
76                    default:
77                        el.html(spinner01);
78                    }
79
80                //Add customized loader image
81
82                if (settings.imagePath !='') {
83                    el.html('<div class="fl"><img src="'+settings.imagePath+'"></div>');
84                }
85                centerLoader();
86        });
87
88        //Time to hide fakeLoader
89        setTimeout(function(){
90            $(el).fadeOut();
91        }, settings.timeToHide);
92
93        //Return Styles 
94        return this.css({
95            'backgroundColor':settings.bgColor,
96            'zIndex':settings.zIndex
97        });
98
99 
100    }; // End Fake Loader
101 
102
103        //Center Spinner
104        function centerLoader() {
105
106            var winW = $(window).width();
107            var winH = $(window).height();
108
109            var spinnerW = $('.fl').outerWidth();
110            var spinnerH = $('.fl').outerHeight();
111
112            $('.fl').css({
113                'position':'absolute',
114                //'left':(winW/2)-(spinnerW/2),
115                'top':(winH/2)-(spinnerH/2)
116            });
117
118        }
119
120        $(window).load(function(){
121                centerLoader();
122              $(window).resize(function(){
123                centerLoader();
124              });
125        });
126
127
128}(jQuery));
129
130
131