| How TO Add Loading Animation In Blogger |
| How do you add animations to loading? |
| How do you add animations to loading? |
|---|
| How can I add loading animation to my website? |
- Hello buddys, welcome to the Mirox26 blogger tutorial. Today I will show you How TO Add Loading Animation Before Page Load In Blogger.
How to add loading animation in Blogger
The functions of the website loading animation effect are the conversions that will appear automatically when a page of the website is loaded and will disappear automatically after the page of the website is fully loaded.The loading animation effect that I will share will not affect the speed of the website.You can add loading animation in Blogger website by following the steps below.
How to add loading animation in Blogger in 4 Steps
If you want to setup in the right way, you have to follow the method shown in the following 3 steps. Excluding any part of 3 steps can cause problems. Therefore the setup will remain unfinished.So setup properly:How to add loading animation in Blogger
Step 1 : Blogger ACCOUNT log in to add loading animation on the blogger website.The Blogger dashboard has to open the EDIT HTML options of the theme.Then copy the code "1. Code" from the download button below. Then the code of "1 code" will be pasted before Close Body Tag</body> .
Step 2 : The second step is to add a loading animation to the Blogger website.You have to copy the code of '2. Code'. Then you have to paste the code of '2 code' before the close head tag</head> .
Step 3 : The third step is to add a loading animation to the Blogger website.You have to copy the code of '3. Code'. Then you have to paste the code of '3 code' after the open body tag<body>
Step 4: Finally you have to finish the work by clicking the save button.
How to add loading animation in Blogger: Code-1
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
How to add loading animation in Blogger: Code-2
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>
How to add loading animation in Blogger: Code-3
<div id='preloader'>
<div id='container' class='spinner'>
<div id='dot'></div>
<div class='step' id='s1'></div>
<div class='step' id='s2'></div>
<div class='step' id='s3'></div>
</div>
</div>
The Final Words
Before doing any work of the theme must be backed up. If there is a problem with the theme while working, it can be recovered with the XML file backed up earlier.
