›› Stylish Page loader Effect using Css
Hello Friends i'm here back with a cool featured post by which you add a new page loading indicator to your blog like my ILibrary. To integrate this style you have to follow these three simple steps... You can customize it in the way it suits you.....
Things to be noted before getting started :
Ready to get started ?Things to be noted before getting started :
- Must have a Transparent Loader.... if you don't have then get it from here.
Remember That you must click on the box beside Transparent background - You Must have JQuery Installed in your Blog.
You Need to follow these simple Steps...
Step 1 :
Go To Dashboard » Design » Edit HTML » Click On Expand widgets Templates
Now Press Ctrl+F and find the following piece of the code...
<body>
Now paste the following code bellow it :
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
Now Press Ctrl+F and find the following piece of the code...
]]></b:skin>
Immediately Paste The Bellow Code above it :
#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #E2E1E1 url(http://imgboot.com/images/cybersidh/ajaxloader_1.gif) no-repeat center; opacity: 0.5;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.v2 #loading { display: none; }
#progress-bar {
position: absolute;
top: 0; left: 0;
background: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
Customization:position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #E2E1E1 url(http://imgboot.com/images/cybersidh/ajaxloader_1.gif) no-repeat center; opacity: 0.5;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.v2 #loading { display: none; }
#progress-bar {
position: absolute;
top: 0; left: 0;
background: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
>The highlighted text in the red color indicates the color of the Process Bar... You can change it if needed...
>The Text in red color is the URL of the image which you have created in AjaxLoader. If Not done then Leave it as it is...
Step 3 :
Now Press Ctrl+F and find the following piece of the code...
</head>
Immediately above it Paste The Following Code :
<script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
Now you are done...
Just hit preview and if every thing is working fine click on Save template....
Feel Free To Share your Opinions Here..
Liked Article ?
Take A Few Minutes to Share it
About Me
- Sidharth
- This is Sidharth, the proud admin of ILibrary. He is a student(+2) and aspires to be Popular..... He likes to Share his works and so here is the Platform Where he is going to share all his works.... Never miss out a post...... Follow us By email to keep yourself up to date !!!!