Hello Guys,Today in this tutorial we are going to explain How to Add CSS Animation Effect On page Loading.Any hint what we are going to explore? Let me tell you , this trick works with on webpage load effect.When the visitor will go to next page this loading effect will be acitve and on screen it will show beautifully loading effect unless and until page is not fully loading the loading image will keep buffering and when its loading your page will be display and the loading CSS effect animation will be fade out.When the webpage is loaded fully of your blogger template it will automatically stop.So if you want to try this trick on your website or blog just follow the steps mentioned below.
How to install Blogger Page loading animation effect on template
installation steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
#cssonload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_eb6FmmU3dEx0G6Gw2wyE9hY7pLUk1FCa7jvCx8IpLzduD4GwfyvBlvXCSoSS4LwJ8MMsPNA-1_OKCVII9JLIRsgM6qzy_ddk16PifokrZAUQiGBFEiKxlSTlt7rOL69BIdh4iewJvYb/s1600/bloggersstand+cssonload+gif+image.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}Step 5. Now Search for <body> tag and add the following below tag just below <body>.
<div id='cssonload'/>Step 6. Now Search for closing </body> tag and add the following below jquery code just above </body>.
<script type='text/javascript'>Step 7. Now Save your Template..Done !
//<![CDATA[
// CSSOnLoad By www.Bloggersstand.com
$(window).bind("load",function(){$("#cssonload").fadeOut(1e3)});
//]]>
</script>