Stylish Animated Page Loading Effect For Blogger

Every Blogger wants his Blog looks Best than Others Blog. Today I Have an Awesome Widget For Blogger, Which your Blog looks More Attractive. It is Like the Exit Effect in Microsoft Power Point Custom Animation.Whenever the visitors will click any link of your Blog, In Spite of old boring Loading Effect, They will Experience an Stylish Animated Page Loading.

Demo

Adding the Script to blogger

• Go to Blogger DashBoard → Template → Edit HTML.
• Find bellow code.

</body>

• Then paste bellow given Script above </body>

<style>
#newbloggerwidget-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-JSwpWywGx0BfjQYY4nmo5r07z6-6TU8yroeIttWiKBdKxkmnDhnZLdrxAn-iAECdUZQz1U0bfDAzD7L73SwuuWnBt0-9ARSgVncigoayqc1BDXSR8sNM0ePssrYGftEHesl4KLQC4Sk/s1600/newbloggerwidget-animatedpageloader.gif) no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="newbloggerwidget-page-loader">Loading....</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#newbloggerwidget-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

• After Adding The Code, Save Your Template.

IF YOU HAVE ANY PROBLEM WITH THIS WIDGET PLEASE COMMENT BELOW.