How To Add CSS Webpage Loading Animation Fade Out Effect

0 /

Also Read

How To Add CSS Webpage Loading Animation On Website loaded in blogger template
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( 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'>
// CSSOnLoad By
Step 7. Now Save your Template..Done ! 

learn trick to create display the css webpage loading animation effect on when website loaded,Stylish fade in fade out black background transparent load animated function on my blogger template



Post a comment Blogger Disqus

0 Comments on "How To Add CSS Webpage Loading Animation Fade Out Effect" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand