Disadvantage: Blogger Layout option may not appear properly.
This article will help you about how to show animated and spinner page loader on your Blog or website STEP-BY-STEP withLESS CODE.
Though it is based on Blogger platform, you can apply this method on different platform manually.
STEP-1: Add HTML and JavaScript
Go to Blogger Dashboard and Theme option. Then Edit HTML to enable in edit mode. Now search for (Ctrl + F)
<body and replace with the following code.<Body Onload='MyFunctionLoader()' Style='Margin:0'><Div Id='Blogger-Loader'/>If you don’t want to loss the necessary attributes within
<Div Style='Display:none' Id='HiddenPage' Class='Animate-Bottom'> <Script>
Window.Onload = Function ShowPage() {
Document.GetElementById('Blogger-Loader').Style.Display = 'None';
Document.GetElementById('HiddenPage').Style.Display = 'Block'; }
</Script>
<body> tag, put onlyonload='myFunctionLoader()' style='margin:0' as attributes.If you save your HTML under theme it will show error that ending
</div> not found before</body> tag.Error Parsing XML, Line 3602, Column 3: The Element Type "Div" Must Be Terminated By The Matching End-Tag "</Div>".Yes. You have to add
</div> tag just before </body tag. You will get this <body> tag after scrolling down at the end of your HTML.STEP-2: Add CSS
Put the following CSS on your Blogger HTML. To find available CSS space search for
]]></b:skin>and paste the copied CSS before it. #Blogger-Loader { Position: Absolute; Left: 50%; Top: 50%; Z-Index: 1; Width: 150px; Height: 150px; Margin: -75px 0 0 -75px; Border: 16px Solid #191919; Border-Radius: 50%; Border-Top: 16px Solid #C33737; Width: 120px; Height: 120px; Animation: Spin 2s Linear Infinite; }STEP-3: Save your Blogger template and reload your blog. You can see the change you wanted to show visitors. This page loading preview will be shown on every loads, not only homepage loading.
@Keyframes Spin { 0% { Transform: Rotate(0deg); } 100% { Transform: Rotate(360deg); } }< .Animate-Bottom { Position: Relative; Animation-Name: Animatebottom; Animation-Duration: 1s }
@Keyframes Animatebottom { From{ Bottom:-100px; Opacity:0 } To{ Bottom:0; Opacity:1 } }
#HiddenPage { Display: None; }
See the demo here:
Rate This Article
Thanks for reading: ADD PAGE LOADING ANIMATED EFFECT IN BLOGGER TEMPLATE - Rexblog, Stay tune to get latest Blogging Tips.