How To Add Pre loader with pure JavaScript in Blogger Website.
The most similar tutorials circulating on the internet use jquery, there's nothing wrong with using jquery, but if your blog doesn't initially use jquery, it's a shame if you just want to install the preloader / preloading effect, you have to install js jquery.
most people use jquery usually for reasons that are easier to use and writing shorter / shorter code, while pure javascript requires writing longer code, but if you just want to create a preloader / preloading effect it doesn't require a lot of code so we can use pure javascript it will be better good.
for the loading effect I use the svg icon, here I also provide 4 svg icons for you to choose if you don't think the icon style is to your taste.
How to Make Preloader / Preloading With Pure Javascript On Blogger
First go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
css
/* preloader by anand nawal */
.an-pre-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-animation: fade 3s forwards;-moz-animation: fade 3s forwards;-o-animation: fade 3s forwards;animation: fade 3s forwards;}
.an-pre-wrap .an-pre-start{position:relative;top:50%;left:50%;padding:30px;display:flex;background:transparent;flex-direction:column;align-items:center;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.an-pre-wrap .an-pre-start svg{width:100px;height:100px;margin:auto;display:inline-block}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-o-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}
Then place this html just below the <body> code or look for similar <body because there is usually a class and id in the body tag.
html
<div class='an-pre-wrap'>
<div class='an-pre-start'>
<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>
</div>
</div>
svg<svg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='26' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='46' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>svg<svg version='1.1' id='L5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 15 ; 0 -15; 0 15' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='30' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 10 ; 0 -10; 0 10' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='54' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 5 ; 0 -5; 0 5' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>svg<svg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <rect x='20' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='30' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='40' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> </svg>svg<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>and finally copy the javascript below and place it above the code </body> or <!--</body>--></body>Don't forget to click save..
javascript
<script>
//<![CDATA[
//preloader by anand nawal
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('.an-pre-wrap').style.display ='none';
}, 3000);
});
//]]>
</script>
ok so that's how to make a preloader with pure javascript on blogger that I can share this time, hopefully it's useful and thanks for visiting.
