m3 loader

by gion_13

JavaScript

(function(global, $, undefined){

    var win = $(global),

        size = {
            width : 205,
            height : 55
        },

        animationFadeDuration = 500,
        animationMoveDuration = 1000,

        wrapper = $('<div id="m3-loader-wrapper" />')
                    .css({
                        position : 'fixed',
                        top : 0,
                        left : 0,
                        zIndex : 9999,
                        width : '100%',
                        height : '100%',
                        opacity : 0,
                        display : 'none',
                        background: 'rgba(0, 0, 0, 0.2)',
                        filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c000000', endColorstr='#4c000000')"
                    })
                    .appendTo('body'),

        logoContainer = $('<div id="m3-loader-logo-container" />')
                            .css($.extend({},size,{
                                position : 'absolute',
                                left : '50%',
                                top : '50%',
                                marginLeft : -size.width/2,
                                marginTop : -size.height/2,
                                overflow : 'visible'
                            }))
                            .appendTo(wrapper),

        logo = $('<img src="https://m3.m3ology.com/public/images/m3Logo.jpg" alt="m3 logo"/>')
                    .css({
                        width : '100%',
                        height : '100%',
                        marginLeft : -1000,
                        backgroundColor : '#232F84'
                    })
                    .appendTo(logoContainer),

        onresize = function(e){
            wrapper
                .width(win.width())
                .height(win.height()); 
        };
    
    win.on('resize.m3Loader', onresize);

    $.m3Loader = {
        show :...