How to Add Preloader effect in Blogger Website
Guide you how to add effects to page preload for Blogger Website while waiting for loading shows dynamic and beautiful page load effects.
Add Effects Page for Blogger Website
 |
| Preloader JQuery |
What is the preload effect?
Literally when you load the page, reload the page, the effect will load and show priority first, then your page will be loaded, the effect will automatically disappear and your page will show up.
When should we use page preload effect for blogspot?
In my opinion, any blog spot can be added, depending on the futility of each one, and most importantly blogs that should take advantage of this effect are: while the page layout loading is skewed, poor ad should be used effectively. this application so that it hides this deficiency.
The Preload Effect Settings page for Blogger are as follows:
Step 1 : Add CSS in tag <b: skin>..</ b: skin>
.body__preloader{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;background-color:#ffffff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
#loading:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loading:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
Step 2 : Add HTML under <body> tag
<div class = 'body__preloader'>
<div id = "loading"> </div>
</div>
Step 3 : Add JavaScript before closing </body> tag
<script>
$ (window) .bind ("load", function () {
$ ('. body__preloader'). addClass ("loaded");
})
</script>
After adding, you save and check the results, so you have successfully added page Preload effect for blogspot already.
Note the blog must use jQuery library
<script src = 'https: //cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'> </script>
- Shero King
Thanks Visit Channel Guide Officially Web Portal.
