Blogger Dynamic Page Loading Effect ~ Face Blog

Saturday, July 28, 2012

Blogger Dynamic Page Loading Effect

3:58 AM

Hemant Verma

No comments

Many websites like Facebook, Google, Blogger having their own loading effect, when we visit on site and site take some loading time and in that time shows the loading effects on the all sites, you can also add a diffrenet and PRO loading effect like Blogger Dynamic Loading Effect with a bar.

Add Blogger Dynamic Page Loading Effect

Login to Blogger > Dashboard
Go to Design > Edit HTML
Search for

</head>

Paste below code above </head>

<style>
/* Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKjze312izK64refc-gSC7U_Pxv6zqUYNpwSHC8zq97zw6SME-MjL2mO0DpADfUwmu_HLS96w6jEiZC8GtSr30gGtVTbAFK5Q0aKSHY8IAoItxQ2S580kdIRL09DONhOAxcdyfiQJl7wX/s1600/index.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.FB #fb-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#fb-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #FF6600;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#fb-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

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

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

$(window).load(function(){

    $("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>