Hi Friends ,Today I am going to show you how to add Simple Spinner Loading effect in Blogger Site
Loading Effect is necessary for Websites which have
heavy or large no. of Css or Java Files because they requires
time to connect and during establishing connection, website show
misconfiguration and that leads a bad impression on visitor.
👉Steps To Install
- First of all Login to your Blogger Dasboard and Go to Themes ,then Click on Edit HTML .
- Now Find </head> with Ctrl+F and Paste the Below Code Just Above it.
<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>
- You can also see <body> or Similar to <body class='item' itemscope='' itemtype='https://schema.org/WebPage'>
- Then Paste This Code Just Below it.
<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>
- Final Step,Now Scroll to the Bottom and Paste This Code Just Above </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(150).fadeOut("slow"),$("body").delay(150).css({overflow:"visible"})});
//]]>
</script>