32.自己写的一个简单的加载插件

/* 
   loader.js
   version:1.0
   author:lgw
  
 */
(function($) {
    "use strict";
    $.fn.loader = function(options) {
        return this.each(function(e) {
            
            var that = $(this)   
            
            $.fn.loader.defaultOptions = {
                isLoading:false,
                type:"ball-beat",
                callBack: function() {
                    
                }
            }
            
            var opts = $.extend(true, {}, $.fn.loader.defaultOptions, options);
            if(opts.isLoading){
                switch(opts.type){
                    case "ball-beat":{
                            initbeat()
                        }
                        break;
                    case "cube-transition":{
                            initcube()
                        }
                        break;
                    default:
                        initbeat()
                        break;
                }
                
                
            }else{
                var $loader = $(".loader-inner")
                if($loader)
                    $loader.removeClass("fadeIn").addClass("fadeOut")
                    $loader.on("webkitAnimationEnd",function(){
                        
                        $loader.remove()
                        //动画结束回调
                        opts.callBack()
                    })
                    
            }
            function initbeat(){
                var loaderHTNL =     "<div class=\"loader-inner ball-beat fadeIn\">"
                                    +   "<p class=\"text\">加载中</p>"
                                    +    "<div></div>"
                                    +    "<div></div>"
                                    +    "<div></div>"
                                      +"</div>"
                  that.append(loaderHTNL)
            }
            function initcube(){
                var loaderHTNL =     "<div class=\"loader-inner cube-transition fadeIn\">"
                                    +  "<div></div>"
                                    +  "<div></div>"
                                    +"</div>"
                  that.append(loaderHTNL)
            }
            
            
    })}
})(jQuery);

            
@-webkit-keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
                transform: scale(0.75); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1); } }

@keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
                transform: scale(0.75); }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1); } }
.ball-beat{
    /*height: 200px;
    line-height: 200px;*/
    text-align: center;
    position: absolute;
    left: 0;top: 0;right: 0;bottom: 0;
      padding-top: 15%;
      background: rgba(0,0,0,0.45);
      
      
}
.ball-beat.fadeIn,.cube-transition.fadeIn{
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
    -webkit-animation-duration: 0.25s;
            animation-duration: 0.25s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
.ball-beat.fadeOut,.cube-transition.fadeOut{
    -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
    -webkit-animation-duration: 0.25s;
            animation-duration: 0.25s;
    -webkit-animation-timing-function: cubic-bezier(.68,-0.08,.64,.55);
            animation-timing-function: cubic-bezier(.68,-0.08,.64,.55);
}
@-webkit-keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}
@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}
@keyframes fadeOut{
    from{opacity: 1;}
    to{opacity: 0;}
}
@-webkit-keyframes fadeOut{
    from{opacity: 1;}
    to{opacity: 0;}
}
.ball-beat>.text{
    color: ghostwhite;
}
.ball-beat > div {
      background-color: ghostwhite;
      width: 10px;
      height: 10px;
     border-radius: 100%;
      margin: 2px;
      -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: ball-beat 0.7s 0s infinite linear;
          animation: ball-beat 0.7s 0s infinite linear; }
.ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
            animation-delay: 0.35s !important; }
            


/*cube*/
@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
            transform: translateX(50px) scale(0.5) rotate(-90deg); }

  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
            transform: translate(50px, 50px) rotate(-180deg); }

  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
            transform: translateY(50px) scale(0.5) rotate(-270deg); }

  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
            transform: translateX(50px) scale(0.5) rotate(-90deg); }

  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
            transform: translate(50px, 50px) rotate(-180deg); }

  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
            transform: translateY(50px) scale(0.5) rotate(-270deg); }

  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

.cube-transition {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
      text-align: center;
      background: rgba(0,0,0,0.35);
      -webkit-transform: translate(-25px, -25px);
          -ms-transform: translate(-25px, -25px);
              transform: translate(-25px, -25px); 
}

.cube-transition > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 15%;
    left: 50%;
    margin-left: -25px;
    background-color: white;
    -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
            animation: cube-transition 1.6s 0s infinite ease-in-out; }
.cube-transition > div:last-child {
      -webkit-animation-delay: -0.8s;
              animation-delay: -0.8s; }

$("body").loader({
            isLoading:false,//false 结束动画 true开启
            type:"cube-transition",//ball-beat cube-transition(动画类型自定义)
            callBack:function(){
                 //回调
            }
        })