CSS Page Loading Effect For Blogger

How to install animated page loading effect on a Blogspot blog with the help of CSS code - Today with the help of this article we are going to learn how we can easily set up the stylish page loading effect on your blog spot blog with the help of some CSS codes. This page loading effect is totally based on ".gif" images. 

This CSS code and Script that will show a loading effect every time when the visitors click the link inside your blog. so before you add this effect on your own blog, make sure to take a look at this loading effect by clicking on the below demo button. (Refresh the demo page to see the effect)

Live Demo

If you like this effect and want to install it in your blog, then follow the below simple steps carefully to add this CSS Page Loading Effect to your blogger blog.

Visit your blogger dashboard, Now go to the "Template" section and then click on the "Edit HTML" button.

In the template, the editor finds the below code by pressing "Ctrl + F" key together from your keyboard.

</body>

After that copy the below code and paste it just before </body>.

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_TpzQNorM5a1u92YgU7eAzAyiwwxwyYlmy2Y0U9hLb8AY0f2MoEd584NpzFAaUiFCxSFKu8b2fExMX9v-xOnGO2CH42mwC2uFm_vGT-9qp_RDdDNnbwhXnL7lyXi0N7d7Fb1eEgKHrI/s500-Ic42/4f432d9234988a5f33b26e0ba06bc6fe.gif&#39;) no-repeat 50% 50%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

Now click on the orange save template button to apply the changes.

You can change the highlighted image URL with any image URL.

That's it! I hope you like this page loading effect! Stay tuned for more cool effects!