To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just above </body>.

<style>
#abt-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/AVvXsEhE_5KIcVDFX9O6gzYZ7ffG64_ggoxIRzExyjGaez77Mp6El-vC-5xkuikOLeG1VEYIijSDRHOBrp7kBRe2sG187_syKPtRVXHMFNvSgYFuwFu-GYQikDTWr_GwqQIjhDzNk1V8wABOgwI/s200/load6.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="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code, save the template.