Responsive Website Design: jQuery Loader spinner

Create index.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery Loader spinner</title>
<link href="introLoader.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="spin.min.js"></script>
<script src="jquery.introLoader.js"></script>
<style>
.myname {
 background:#999999;
 text-align:center;
 margin:auto;
 height:500px;
 width:500px;
}
</style>
</head>
<body>
<div id="element"></div>
<div class="myname">this is demo page</div>
<script>
   $(document).on('ready', function() {
    var loader = $("#element").introLoader({
     animation: {
                        name: 'simpleLoader',
                        options: {
                            effect:'slideUp',
                            ease: "easeInOutCirc",
                            style: 'dark',
                            delayTime: 1000, //delay time in milliseconds
                            animationTime: 500
                            
                        }
                    },

spinJs: {
                        lines: 13, // The number of lines to draw
                        length: 20, // The length of each line
                        width: 10, // The line thickness
                        radius: 30, // The radius of the inner circle
                        corners: 1, // Corner roundness (0..1)
                        color: '#fff', // #rgb or #rrggbb or array of colors
                    }
    });
                
   });
            
            
  </script>
</body>
</html>

2.create introLoader.css

.introLoader,
.introLoading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
}
.introLoading {
  background-color: #fff;
}
.absolute.introLoader {
  position: absolute;
}
body.introLoader_preventScroll {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* *************************************************** */
/* SimpleLoader Animation */
/* *************************************************** */
.absolute.introLoader.simpleLoader {
  position: absolute;
}
/* SimpleLoader Animation Colors */
/* -------------------------------------------- */

.theme-dark.introLoader.simpleLoader {
  background-color: #333333;
}

/* *************************************************** */
/* GifLoader Animation */
/* *************************************************** */
.introLoader.gifLoader .gifLoaderInner {
  background-image: url(spinners/circle-simple_light.gif);
  background-repeat: no-repeat;
  background-position: center center;
}
.introLoader.gifLoader .gifLoaderInnerCustom {
  background-repeat: no-repeat;
  background-position: center center;
}
.introLoader.gifLoader .gifLoaderInner,
.introLoader.gifLoader .gifLoaderInnerCustom {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.theme-light.gifLoader .gifLoaderInner {
  background-color: #ffffff;
}
.theme-dark.gifLoader .gifLoaderInner {
  background-image: url(spinners/circle-simple_dark.gif);
  background-color: #333333;
}

.introLoader.counterLoader .counterLoaderBox {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.small.introLoader.counterLoader .counterLoaderBox {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 0.8em;
}
.medium.introLoader.counterLoader .counterLoaderBox {
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 2em;
}
.large.introLoader.counterLoader .counterLoaderBox {
  width: 300px;
  height: 300px;
  line-height: 300px;
  font-size: 3em;
}
.circle.introLoader.counterLoader .counterLoaderBox {
  border-radius: 50%;
}

3.copy jQuery.easing.1.3.js

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
 def: 'easeOutQuad',
 swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 },
 easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
 },
 easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
});

4. copy introLoader.js

(function($) {

$.introLoader = function(element, options) {

var defaults = {

animation: {
                name: 'simpleLoader',
                options: {
    
                    /* Shared Options */
                    /* ----------------------------- */
                    exitFx: 'fadeOut',
                    ease: 'linear',
                    style: 'light',
                    delayBefore: 500,
                    delayAfter: 0,
                    exitTime: 300,
                    animationTime: 300,
                    
                    customGif: false,
                    customGifBgColor: false,
                    
                    /* "doubleLoader" animation only */
                    /* ----------------------------- */
                    progbarTime: 300,
                    progbarDelayAfter: 300,

/* "lettersLoader animation only */
                    /* ----------------------------- */
                    loaderText: 'Website is Ready!',
                    lettersDelayTime: 1,

/* "Globals Options */ 
                    /* ----------------------------- */
                    preventScroll: false,
                    fixed: true,
                    stop: true,
                    onAfter: function(){},
                    onBefore: function(){}
     
                }
            },

spinJs: {}

}

var plugin = this;

plugin.settings = {}

var $element = $(element),
             element = element;   
        
        //Constructor
        plugin.init = function() {
            
            
            plugin.settings = $.extend(true, defaults, options);
            
            // spinJS Options
            var spinOpt = {
                lines: this.settings.spinJs.lines,
                length: this.settings.spinJs.length, 
                width: this.settings.spinJs.width, 
                radius: this.settings.spinJs.radius, 
                corners: this.settings.spinJs.corners, 
                rotate: this.settings.spinJs.rotate,
                direction: this.settings.spinJs.direction,
                color: this.settings.spinJs.color, 
                speed: this.settings.spinJs.speed,
                trail: this.settings.spinJs.trail, 
                shadow: this.settings.spinJs.shadow,
                hwaccel: this.settings.spinJs.hwaccel, 
                className: this.settings.spinJs.className,
                zIndex: this.settings.spinJs.zIndex,
                top: this.settings.spinJs.top, 
                left: this.settings.spinJs.left 
            }

// animation options object
            var anim = plugin.settings.animation.name;
            var animOpt = plugin.settings.animation.options;
            var spinOpt = plugin.settings.spinJs;
            
            
            
            // Choose Animation
            switch(anim) {
                case "simpleLoader":
                    plugin.spinner = new Spinner(spinOpt).spin();
                    simpleLoaderAnimation(element,animOpt,spinOpt);
                    break;
                case "doubleLoader":
                    doubleLoaderAnimation(element,animOpt);
                    break;
                case "lettersLoader":
                    plugin.spinner = new Spinner(spinOpt).spin();
                    lettersLoaderAnimation(element,animOpt,spinOpt);
                    break;
                case "counterLoader":
                    plugin.spinner = new Spinner(spinOpt).spin();
                    counterLoaderAnimation(element,animOpt,spinOpt);
                    break; 
                case "gifLoader":
                    gifLoaderAnimation(element,animOpt);
                    break;      
                default:
                    plugin.spinner = new Spinner(spinOpt).spin();
                    simpleLoaderAnimation(element,animOpt,spinOpt);
                    break;
            }

}

/*  
            ==================================================
            PUBLICS
            ================================================== 
        */
        
        plugin.stop = function() {
            
            switch(plugin.settings.animation.name) {
                case "simpleLoader":
                    simpleLoaderAnimationExit();
                    break;
                case "doubleLoader":
                    doubleLoaderAnimationExit();
                    break;  
                case "lettersLoader":
                    lettersLoaderAnimationExit();
                    break; 
                case "counterLoader":
                    counterLoaderAnimationExit();
                    break;    
                case "gifLoader":
                    gifLoaderAnimationExit();
                    break;    
            }
            
        } // end plugin.stop()
        
        
        plugin.destroy = function() {
            $(element).removeData();
        }

/*  
            ==================================================
            PRIVATES
            ================================================== 
        */
        
        // ------------------------- gifLoaderAnimation ----------------------------------
        var gifLoaderAnimation = function(element,animOpt) {
            
            // onBefore function 
            animOpt.onBefore();  
            animationOpening(element,animOpt,'gifLoader');
            
            var cssStyle = "";
            if (animOpt.customGif != false && animOpt.customGif != '') {
                var elementInnerClass = 'gifLoaderInnerCustom';
                cssStyle = 'background-image: url('+animOpt.customGif+');'
            }else{
                var elementInnerClass = 'gifLoaderInner';
            }
            
            cssStyle += (animOpt.customGif != false && animOpt.customGif != '' && animOpt.customGifBgColor != false && animOpt.customGifBgColor != "") ? 'background-color:'+animOpt.customGifBgColor+';' : '';
            
            var markup  = '';
                markup += '<div id="introLoaderSpinner" class="gifLoaderInner" style="'+cssStyle+'">';
                markup += '</div>';
            
            $(element).html(markup);
            $(element).show();
            
            if (animOpt.stop === true) {
                $(window).on('load', function() {
                    gifLoaderAnimationExit();
                });
            }
        }
        
        
        var gifLoaderAnimationExit = function() {
            
            var animOpt = plugin.settings.animation.options; 
            animationExitEffect(animOpt,false);
            
        }
        
        // ----------------------------------------------------------------------------------
        
       
        // ------------------------- simpleLoaderAnimation ----------------------------------
        
        var simpleLoaderAnimation = function(element,animOpt,spinOpt) {
            
            // onBefore function 
            animOpt.onBefore();  
            animationOpening(element,animOpt,'simpleLoader');
          
            var markup  = '';
                markup += '<div id="introLoaderSpinner" class="introLoaderInner">';
                markup += '</div>';

$(element).html(markup);
            $(element).show();

// ----------------------------------------------------------------------------------
        
        
        // ------------------------- doubleLoaderAnimation ----------------------------------
        
        var doubleLoaderAnimation = function(element,animOpt) {
            // onBefore function 
            animOpt.onBefore(); 
            animationOpening(element,animOpt,'doubleLoader');
            
            var markup  = '';
                markup += '<div class="doubleLoaderTop"></div>';
                markup += '<div class="doubleLoaderBottom"></div>';
                markup += '<div class="doubleLoaderProgBar"><span></span></div>';

$(element).html(markup);
            $(element).show();     
            
            if (animOpt.stop === true) {
                $(window).on('load', function() {
                    doubleLoaderAnimationExit();
                });       
            }
            
        }
        
        var doubleLoaderAnimationExit = function() {
            
            var animOpt = plugin.settings.animation.options; 
            
            setTimeout(function() {
                
                $(element).find('.doubleLoaderProgBar').find('span').animate(
                    {'width':'100%'},
                    animOpt.progbarTime, 
                    animOpt.ease,
                    slidingDoorsVertical()
                );
                
            }, animOpt.delayBefore ); // end Timeout
            
            function slidingDoorsVertical() {
                setTimeout(function() {
                    $(element).find('.doubleLoaderProgBar').hide();
                    $(element).find('.doubleLoaderTop, .doubleLoaderBottom').animate(
                        {'height':0},
                        animOpt.exitTime, 
                        animOpt.ease,
                        function() {
                            $(element).hide();
                            if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                        }
                    );
                    $('.doubleLoaderBottom').promise().done(function(){
                        animOpt.onAfter(); // onAfter function
                    });
                }, animOpt.progbarTime + animOpt.progbarDelayAfter ); // end Timeout    
            } // end slidingDoorsVertical()
        }
        
        // ----------------------------------------------------------------------------------
        
        
        // ------------------------- lettersLoaderAnimation ----------------------------------
        var lettersLoaderAnimation = function(element,animOpt,spinOpt) {
            
            // onBefore function 
            animOpt.onBefore();
            animationOpening(element,animOpt,'lettersLoader');
            
            // split text string
            var textString = stringSplitter(animOpt.loaderText,'lettersLoaderItem');
            
            // animation html markup
            var markup  = '';
                markup += '<div id="introLoaderSpinner" class="introLoaderInner"></div>';
                markup += '<div id="lettersLoaderAnimation" class="lettersLoaderRow">';
                markup +=   textString;
                markup += '</div>';
                
            $(element).html(markup);
            $(element).show();

case "slideUp":
                        if(stopSpin === true) plugin.spinner.stop();
                        $(element).animate(
                            {"bottom":$(window).height()},
                            animOpt.exitTime, 
                            animOpt.ease,
                            function () {
                                $(element).hide();
                                $('#introLoaderSpinner').remove();
                                if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                                animOpt.onAfter(); // onAfter function
                            }
                        );
                        break;

case "slideDown":
                        if(stopSpin === true) plugin.spinner.stop();
                        $(element).animate(
                            {"top":$(window).height()},
                            animOpt.exitTime, 
                            animOpt.ease,
                            function () {
                                $(element).hide();
                                $('#introLoaderSpinner').remove();
                                if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                                animOpt.onAfter(); // onAfter function
                            }
                        );
                        break;

case "slideLeft":
                        if(stopSpin === true) plugin.spinner.stop();
                        $(element).animate(
                            {"right":$(window).width(),"left":"-100%"},
                            animOpt.exitTime, 
                            animOpt.ease,
                            function () {
                                $(element).hide();
                                $('#introLoaderSpinner').remove();
                                if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                                animOpt.onAfter(); // onAfter function
                            }
                        );
                        break; 
                        
                    case "slideRight":
                        if(stopSpin === true) plugin.spinner.stop();
                        $(element).animate(
                            {"left":$(window).width(),"right":"-100%"},
                            animOpt.exitTime, 
                            animOpt.ease,
                            function () {
                                $(element).hide();
                                $('#introLoaderSpinner').remove();
                                if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                                animOpt.onAfter(); // onAfter function
                            }
                        );
                        break;   
                        
                    default:
                        $(element).fadeOut(
                            animOpt.exitTime, 
                            animOpt.ease,
                            function() {
                                if(stopSpin === true) $('#introLoaderSpinner').remove();
                                if (animOpt.preventScroll === true) $('body').removeClass('introLoader_preventScroll');
                                animOpt.onAfter() // onAfter function
                            }
                        );
                        break;
                }

}, animOpt.delayBefore);
        
        } // end of animationExit()
        
        
        var stringSplitter = function(string, spanClass) {
            var str = string.split("");
            var markup = "";
            for (var i=0; i<str.length; i++) {
                var spanCssClass= spanClass;
                if(str[i] == " ") {
                    spanCssClass = spanClass+"-space";
                    str[i] = " ";
                }
                markup += '<span class="'+ spanCssClass +'">'+ str[i] +'</span>';
            }
            return markup;
        } //end of stringSplitter()
        
        
        
        /* ############################################################## */
        /* PLUGIN INIT */
        plugin.init();

}

$.fn.introLoader = function(options) {

return this.each(function() {
  
            if (undefined == $(this).data('introLoader')) {
   
                var plugin = new $.introLoader(this, options);
                $(this).data('introLoader', plugin);
                
            }else{
   
                $(this).removeData('introLoader');
                var plugin = new $.introLoader(this, options);
                $(this).data('introLoader', plugin);
    
            }

});

}

})(jQuery);

Copy spinmin.js

//fgnass.github.com/spin.js#v2.0.1
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return l[e]||(m.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",m.cssRules.length),l[e]=1),e}function d(a,b){var c,d,e=a.style;for(b=b.charAt(0).toUpperCase()+b.slice(1),d=0;d<k.length;d++)if(c=k[d]+b,void 0!==e[c])return c;return void 0!==e[b]?b:void 0}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a,b){return"string"==typeof a?a:a[b%a.length]}function h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}m.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" "+-j}),{width:k,height:k})}function h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.width,left:d.radius,top:-d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var i,j=d.length+d.width,k=2*j,l=2*-(d.width+d.length)+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.lines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k=["webkit","Moz","ms","O"],l={},m=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}(),n={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};h.defaults={},f(h.prototype,{spin:function(b){this.stop();{var c=this,d=c.opts,f=c.el=e(a(0,{className:d.className}),{position:d.position,width:0,zIndex:d.zIndex});d.radius+d.length+d.width}if(e(f,{left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function o(){h++;for(var a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function h(b,c){return e(a(),{position:"absolute",width:f.length+f.width+"px",height:f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg) translate("+f.radius+"px,0)",borderRadius:(f.corners*f.width>>1)+"px"})}for(var i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px #000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}});var o=e(a("group"),{behavior:"url(#default#VML)"});return!d(o,"transform")&&o.adj?i():j=d(o,"animation"),h});

Friday 10 April 2015

jQuery Loader spinner

Create index.html

2.create introLoader.css

3.copy jQuery.easing.1.3.js

4. copy introLoader.js

Copy spinmin.js

No comments:

Post a Comment