JohnyCassiaResponsivedemo

/*  MBL Lazy Page Loading Effect (www.webs-tools.blogspot.com) */

#mbl-lazyloading {

    position: fixed;

    z-index: 50;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;

    line-height: 350px;

    text-align: center;

    font-size: 36px;

    color: #353231;

    text-indent: -9999px;

}

.MD #mbl-lazyloading { display: none; }

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

    #loading {

        position:absolute;

        width:1040px;

        min-height:768px;

    }

}

#mbl-progress-bar {

    position: absolute;

    top: 0; left: 0;

    background: #de1301;

    opacity: 0.8;

    width: 0;

    height: 18px;

}

#mbl-loader {

    height: 100%;

    display: none;

}

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6OSjqrfF7Jj7RU5vHiDUbnFhJbi3x9F6G-cONwm6F5yP9COY3PbbkLnyHyAa1qz6ln1a5hZOqawIMygJUuJwO7cFz_Jh1sMCZFsihaMlnH3vqsKgoZBEJsEjKUkzoWGIQyDwQDV9HYuQ/s1600/MBL-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7j38t7cmkQzUkF-vNN_byqv_80OTzuagJBXz3zgd79CjpbhX75AFsk2GkmRbvfNCCTzj0tGIoq8o9tinhlxXrat29rzQk3PDvVyZ1OtdtZaVFnvq5u4ERoeQBaLrM_wx4MFrs6_aiW34/s1600/MBL-Loading-2.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwxDypvgYrrwoXlXlT1UEQnfuIjeaDPExZO4MKMFwbMx-zqZ46onqt8uBusWiwgW-RhxtVdU6SmwBmz6Lh2q_xEiquxO2vUAs7Wp4JebIAx5ONu1zHHKqhFM_rwQGO-q4tZdspUroYIg/s1600/MBL-Loading-3.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxi5eRqpo6MSKfOiV7WiPpuDRW6Ty2694IlSiYkoUoBh0aNmBz3louG5EqDXQOrBRWoFpKOr4jP7IIda8D8BYTYHJuO3YPMWH8DXb-gVFD0n1k8K7o4MjT32_e7vq4dBV4K-vvMOfvvPc/s1600/MBL-loading-4.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISlpxLA4ICUk3t7uKrhmVC7-KeMDpDSXdAk5APnE5RsdpFlzwpw5CrXTx8tKU_hnWMP4_Dsp4Kx0m6tnRpImzZNUczt6BNY3_jo2_Kdgm-mKy325Q58ZXlq_CBjkEbfjm0YWMGz2oE-c/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZlT1trNa-ilrBDgcOfQvBsCsi7bYe7cr7rJrZGQrzotIzf3rF6vsheOp51PhC0KAv-6NR3ISJAXVSXBIAK1MlA64EUVnO3Bs19MU1ZxbS2-GeL_hFl0rJGs3ayIDZE9pB-1gtG5CVik/s1600/MBL-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rGwURqZx9yovOPQfEiyXuHvFYCt2JhDfs6LVYFnzPNjKaOC30Oitwm9HS8t8_z5VfcMVy0YwFAr1NP6CfrfkO87LINCBghczGBpfymqtw1GnFVK04CTbAhrwZkNZlbIjJ8-FI3VkZFU/s1600/MBL-loading-7.gif

<script>

(function($){

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

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

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

$(window).load(function(){

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

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

    });

});

})(jQuery);

</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div></b:if>

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://www.mybloggerlab.com">MyBloggerLab</a></div></div>