How To Add Preloading Effect In Blogger?

Hey Blogger’s Do you want to add cool preloading effect in your blogger blog?

If yes then I’ll tell you how you can add preload effect in your blog.

If you don’t know about coding then don’t worry I will show you step by step Process so you can add easily this effect in your blog.

What Is Preloading Effect?

The workings of the Preloading Effect in Blogger are transitions that will appear automatically when loading pages on the blog and will disappear after the page is fully loaded.

The Preloading effect that I will share will not affect the speed of the blog because it is very light pure CSS and SVG without images.

Install Preloading Effect In Blogger

First you have to add this JQuery Library in your blog’s code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

If this code is already available in your HTML Code then replace this.

Now Follow These Steps Carefully.

• Go To Blogger Dashboard
• Click On Theme Section
• Now Click On Edit HTML
• Then Search For </head>

Copy the code provided below and paste it just above </head> tag.

<script type='text/javascript'>

//<![CDATA[

// Preloader

$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});

//]]>

</script>

• Now Search for </body> tag
• Now copy CSS & HTML code and paste them after </body> tag

<div id='preloader'>

<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>

   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>

</svg>

</div>

<style type='text/css'>

/* Preloader */

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}

@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}

.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}

@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}

@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}

</style>

• How To Add Snow Effect In Blogger?

Now Click On Save Button and refresh your blog.

You can see your preloader effect is working well.

If you love this then you can follow our blog for more content also subscribe our Youtube channel for more information.