How to add Loading Animations Effect on Blogger

Do you want to add Loading Animations Effect to your blog posts? You must have seen some website that when you open a post, it displays an animated object in front. In this article I will show you how to add Loading Animations Effect to your blogger/ posts.

Add Loading Animations Effect

• Step 1. On Blogger Dashboard, click Theme.

• Step 2. Click the arrow down icon  next to 'customize' button.
• Step 3. Click Edit HTML, you will be redirected to editing page.
• Step 4. Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif') no-repeat 50% 50%;padding:1em 1.2em;display:none}

And now you have to copy the code which I have given to you below. Copy the code and paste this code under the </body> section.

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

Now you can copy and replace the following loading animation link with the link given in css, and save the theme by replacing the URL of the loading animation of your choice.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil15bIZ-2dd9mS_sEz3wWmAm7E6fvsIgMc78HcXAKsA6qygI4X_-ee2-XWqnYD-Ze6mucsoTofwVCa3clTjDBth9uOAoaJXtPNiZf7H1YrlCpEpWLCu-O_dcZEA9eR8OXvdEjWK5a2g2s/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZHPF6lEWG-T5zpc6Irj53VgIlzx7qLd5hT-6zJu4P48pnBiuwAzeIYtsJbIvxUrNXAHuQvsbijfESV8hVxaqhzLSUWYCx4oPow0bTQegisEDH7eJAfWohdc3bB_vPx2gQL0IzPlJXFue/s1600/loading10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4a0GOLpO11_Y2cFALgMsrXhZI-XJo89nFu_Uu_hEcuBAji16W02xbprNR0hB_8XQGZS6m8BgmAsDFU3G_xZl581ksr73eOgTebtH9Wt4O2j8e41jeZXjPB6zxGcNaPr4JGPwqJlYswQ4/s1600/loading.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZwqLO4Yp6MGANq33zb2FTP6EQ7PVlGMtNfm2BwhujBs19ntjawuylghPnPC4geCxQjKJqSZUpjqeimy2iBKPNXffrmO5xnswVIvOJhEidgIDmVboq5c9antNSvcB_stAsFTARW_6sdv9/s1600/29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRi5F_vbc8W-sezA9cuNaelgAlxvIvBKd_otDhJXBwy6-y-an8Qe7x8uoA4ItZS__rPKHE0ZU-QQrgskNbSi6GGsF6AYv3bLRFk_JBL-os-yKLdTQjvo-oZ_K3pPJ6gIRGjhoyh2W6qwt/s1600/Ball-1s-200px.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndPTQRGqTyQrEg7y1idpBHwVSfszX8tyDSFodCdC-hIqbjIN_TxSO5DOCp29TmGLE8pxJD4S-zacbPQB86E3OWz5fK5EWdj5bZHxy50UoedlXLKt4qDMFRuyZcChKbkDvjWy9e59Q9Ka1/s1600/Double+Ring-1s-200px.gif

Now, the Loading Animations Effect is completely created and working properly if you follow all the steps correctly. If there are questions or steps that are not understood, please write down the questions and problems via the comments column provided below.