How to add preloader in HTML page
 |
| How to add preloader in HTML page |
Hello all on this occasion I will share how to make a preloader / preloading with pure javascript in blogger.
This widget was reviewed by imran shah through comments on one of the articles on this blog, for those of you who want to regulate tutorials or widgets, please comment on one of my articles or forum pages and email, if it's good or interesting I will make it in the future. and keep in mind I do not accept regulations from you guys who copy my articles and share my source code without permission!
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.
for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.
How to Make Preloader / Preloading With Pure Javascript On Blogger
please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
/* preloader by Blogger Store */
.bs-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;}
.bs-pre-wrap .bs-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}
.bs-pre-wrap .bs-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}}continue to put this html right under the <body> code or look for something similar to <body because usually there is a class and id in the body tag.
<div class='bs-pre-wrap'>
<div class='bs-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>here I provide 4 icons that can be used, please replace the svg icon that I marked above
<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 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 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 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> if you have don't forget to click save.
<script>
//<![CDATA[
//preloader by Blogger Store
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('.bs-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 thank you for visiting.
Thanks for reading: How to add preloader in HTML page, Sorry, my English is bad:)
