Blogger Page Loading Animation
Use Page Loading Animation to give visitors the smooth browsing experience.- Created with Pure CSS & Pure Javascript.
- Smooth Page Loading Animation.
Add Page Loading Animation in Blogger
Step 1. Add CSS
Go to Template > Customize > Advanced > Add CSS & add the code below then Save it.
/* The loader */
#v5-loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* The Page Animation */
.animate-bottom { position: relative; animation-name: animatebottom; animation-duration: 1s }
@keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } }
#myPage { display: none; }
#v5-loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* The Page Animation */
.animate-bottom { position: relative; animation-name: animatebottom; animation-duration: 1s }
@keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } }
#myPage { display: none; }
Step 2. Add JavaScript
Go to Template > Edit HTML. Click on the code area & press Ctrl+F. Type and search for the <body and replace the hole body tag (<body expr:class='"loading" + data:blog.mobileClass'>) with the code below.
<body onload='myFunctionLoader()' style='margin:0'><div id='v5-loader'/>
<div style='display:none' id='myPage' class='animate-bottom'>
<script>
window.onload = function showPage() {
document.getElementById('v5-loader').style.display = 'none';
document.getElementById('myPage').style.display = 'block'; }
</script>
<div style='display:none' id='myPage' class='animate-bottom'>
<script>
window.onload = function showPage() {
document.getElementById('v5-loader').style.display = 'none';
document.getElementById('myPage').style.display = 'block'; }
</script>
Search for the </body and past </div> before it.