Add stylish page loading effect widget for blogger | Lush web
Add stylish page loading effect widget for blogger | Lush web
This widget is very beautiful and useful for your blog. Every visitor will like this Stylish loading page effect when he change the page. you can also use another loading effects but this is best for your blog.
Now add this widget to your blog and style your blog now!!!!
First go to your template
click on edit template
search for </head>
Now paste this code above/before of </head>
<style>
/* jQuery page loading effect by www.Lushweb.blogspot.com */
#md-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh24rjeULfI3OzIDbLCkM5PsdjIhVWJtupLP_TFBkhEW49sCoz_HE2HYxUIP31pZwjslrfYSmGbzVsMJF7ZgadeV1EK21RBQ0w-pRZ1TFf4Yy6VuZrdnDotVp60sKYgAzTG0pwk-f6U3YI6/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>
Now save and check.
