jquery-loading-overlay-css-animation
Version:
A flexible loading overlay jQuery Plugin with loading gif replaced with css animation.
1 lines • 3.6 kB
JavaScript
(function(e){"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof exports?require("jquery"):jQuery)})(function(e,a){function i(n,o){var r=i.bind(null,n,o);if(!e(n).height())return void setTimeout(r,100);0==e("#overlay-animation").length&&e('<style id="overlay-animation">').html(" @keyframes loadingOverlayAnimation { from { transform: scale(1); } to { transform: scale(.2); } }").appendTo("body"),n=e(n);var s=n.is("body"),d=n.data("LoadingOverlayCount");if(d===a&&(d=0),0===d){var l=e("<div>",{class:"loadingoverlay",css:{"background-color":o.color,position:"relative",display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"}}),f=.6,c=e("<div>",{class:"loadingoverlaycircle",css:{position:"absolute",width:13,height:13,backgroundColor:"#000",borderRadius:"100%",animation:"loadingOverlayAnimation "+f+"s infinite cubic-bezier(.3,0,1,.75)"}}),v=e("<div>",{css:{position:"relative",width:"300px",height:"300px",maxWidth:"100%",maxHeight:"100%"}});if(l.append(v),o.zIndex!==a&&l.css("z-index",o.zIndex),o.fontawesome&&e("<div>",{class:"loadingoverlay_fontawesome "+o.fontawesome}).appendTo(l),o.custom&&e(o.custom).appendTo(l),s?l.css({position:"fixed",top:0,left:0,width:"100%",height:"100%"}):l.css("position","fixed"===n.css("position")?"fixed":"absolute"),t(n,l,o,s),o.resizeInterval>0){var p=setInterval(function(){t(n,l,o,s)},o.resizeInterval);n.data("LoadingOverlayResizeIntervalId",p)}o.fade?o.fade===!0?o.fade=[400,200]:"string"!=typeof o.fade&&"number"!=typeof o.fade||(o.fade=[o.fade,o.fade]):o.fade=[0,0],n.data({LoadingOverlay:l,LoadingOverlayFadeOutDuration:o.fade[1]}),l.hide().appendTo("body").fadeIn(o.fade[0]);for(var h=50,u=Math.PI,m=12,g=v.innerWidth(),y=v.innerHeight(),x=0;x<m;x++)v.append(c.clone().css({left:g/2+Math.sin(2*u/m*x)*h,top:y/2+Math.cos(2*u/m*x)*h,animationDelay:-f/m*x+"s"}))}d++,n.data("LoadingOverlayCount",d)}function n(i,n){i=e(i);var t=i.data("LoadingOverlayCount");if(t!==a)if(t--,n||t<=0){var o=i.data("LoadingOverlayResizeIntervalId");o&&clearInterval(o),i.data("LoadingOverlay").fadeOut(i.data("LoadingOverlayFadeOutDuration"),function(){e(this).remove()}),i.removeData(["LoadingOverlay","LoadingOverlayCount","LoadingOverlayFadeOutDuration","LoadingOverlayResizeIntervalId"])}else i.data("LoadingOverlayCount",t)}function t(a,i,n,t){if(!t){var o="fixed"===a.css("position")?a.position():a.offset();i.css({top:o.top-parseInt(e("html").css("padding-top"),10)-parseInt(e("html").css("margin-top"),10)+parseInt(a.css("border-top-width"),10),left:o.left-parseInt(e("html").css("padding-left"),10)-parseInt(e("html").css("margin-left"),10)+parseInt(a.css("border-left-width"),10),width:a.innerWidth(),height:a.innerHeight()})}var r=t?e(window):a,s="auto";n.size&&"auto"!=n.size&&(s=Math.min(r.innerWidth(),r.innerHeight())*parseFloat(n.size)/100,n.maxSize&&s>parseInt(n.maxSize,10)&&(s=parseInt(n.maxSize,10)+"px"),n.minSize&&s<parseInt(n.minSize,10)&&(s=parseInt(n.minSize,10)+"px")),i.children(".loadingoverlay_fontawesome").css("font-size",s)}var o={color:"rgba(255, 255, 255, 0.8)",custom:"",fade:!0,fontawesome:"",imagePosition:"center center",maxSize:"100px",minSize:"20px",resizeInterval:50,size:"50%",zIndex:2147483647};e.LoadingOverlaySetup=function(a){e.extend(!0,o,a)},e.LoadingOverlay=function(a,t){switch(a.toLowerCase()){case"show":var r=e.extend(!0,{},o,t);i("body",r);break;case"hide":n("body",t)}},e.fn.LoadingOverlay=function(a,t){switch(a.toLowerCase()){case"show":var r=e.extend(!0,{},o,t);return this.each(function(){i(this,r)});case"hide":return this.each(function(){n(this,t)})}}});