<style>

/*  jQuery page loading effect by www.labstrikes.blogspot.com */

#md-loading {

    position: fixed;

    z-index: 50;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: #FDFEF8 url(http://1.bp.blogspot.com/-oihuvyFdV78/UA0jMnQeZUI/AAAAAAAADeg/_3dvib8GVzs/s1600/MD-Lodding.gif) no-repeat center;

    line-height: 350px;

    text-align: center;

    font-size: 36px;

    color: #353231;

    text-indent: -9999px;

}

.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {

    #loading {

        position:absolute;

        width:1040px;

        min-height:768px;

    }

}

#md-progress-bar {

    position: absolute;

    top: 0; left: 0;

    background: #de1301;

    opacity: 0.8;

    width: 0;

    height: 18px;

}

#md-loader {

    height: 100%;

    display: none;

}

</style>

<script>

 

(function($){

 

$("html").removeClass("MD");

 

$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });

$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });

 

$(window).load(function(){

 

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){

        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });

    });

});

})(jQuery);

</script>