How to make an animated loading page on Blogger

Making your site looks beautiful will make your visitors come back everyday for your new post and also because with your awesome template. So to make your site have a much beautiful template, We will let you know how to put an animated loading page on your Blogger Blog.
Animated loading page is a page blank page that will show if you click a link inside your Blog, In short animated loading pages acts as a loading page. To see a demo for this animated loading page, You may click any ingoing or outgoing links inside my Blog. If you notice, I'm using the animated loading page on my Blog. See the procedure below for you to use now the loading page for Blogger.
Don't Worry this will add a bit of awesomeness in your Blog.

Procedure for putting the Animated Loading Page (Blogger):

• Go to Templates then Edit HTML.
• Put the below code just above </body>

<!--this is the animated loading page--><style>#abt-page-loader {        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/AVvXsEiaOXY3m3mJ9Add1nyXgC2iA3kbKOfD66RN_pzUCbwsljBKj-yE2AO5AprbjGfqxndsbquUADKQoWPWDe6eskgbiMZWuB3Gh3SDX0PTHAjQJoIOQBeRWh1aoJerqDnEwOtaKUN85X1cF3Q/s1600/ajax-loader.gif&#39;) 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="abt-page-loader">Loading...</div>');$(window).on("beforeunload", function() {    // ... Show the Animation `.fadeIn()`    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});//]]></script><!--this is the animated loading page-->