Welcome to the Droidnur123 blog today we will talk about Preloading Effects. There are many ways to beautify your blog, one of the best is by installing this cool preloading effect on Blogger. For those who are curious, see the tips below.
What is the preloading effect on Blogger & how its warks?
The way the Preloading Effect works on Blogger is a transition that will appear automatically when loading a page 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. Previously I also shared a related post here" How to Give a Simple Loading Animation Effect When the Page Loads". Here are simple tips on How to Install Preloading Effects
How to Install Cool Preloading Effects on Blogger?
Before adding the code that I will share, the code will run fine if you use jQuery Migrate
First Go to Blogger >then Themes > Click the Edit HTML button next to customize> Add this code before </body>or <!--</body>--></body>
jQuery code:
<script>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Then add this code just below the <body> tag
HTML Codes:
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='https://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>Next add this CSS code before </head>or </head><!--<head/>-->
CSS Codes :
<style>
/* Preloader by Droidnur */
#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>After that click the Save theme and see the results.
Demo
Other options popular Preloading Animation
And here I have also provided some HTML and CSS options for preloading animation effects that you can adjust according to your needs.
Amazing Bounce Dot
Html Code
<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>CSS Code
#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}Demo
Show All Animations