How to install a new and dynamic page loading effect in blogspot blog - This animated loading effect is just awesome, because it's looking very cool and dynamic whenever you reload your blog pages. This loading effect is not same like others, it's more different like other page loading effects. We built this loading effect with the help of some css and jQuery script.
Before your setup this loading effect in your blog, make sure to take a look of this effect by clicking on the below demo button.
Now if you like this page loading effect and want to install it on your own blog, then simply follow the below simple steps.
How to Install Animation Loading Effect?
At the first, go to your blogger dashboard - LoginGo to the "Template" section,
Click on the "Edit Html" button.
Copy the below CSS code and paste it just before ]]></b:skin> or </style>.
/* CSS Loader Keren by indzign.blogspot.com */
#loadhalaman{position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none}
.loadball{background-color:transparent;border:5px solid #00a3ff;border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow:0 0 35px #00a3ff;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear}
.loadball-2{background-color:transparent;border:5px solid #00a3ff;border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow:0 0 15px #00a3ff;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-moz-transform:rotate(145deg);opacity:1}
100%{-moz-transform:rotate(-320deg);opacity:0}
}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-webkit-transform:rotate(145deg);opacity:1}
100%{-webkit-transform:rotate(-320deg);opacity:0}
}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}Now copy the below jQuery Script and paste it just before </body>.
<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
$('#loadhalaman').click(function() {
$(this).hide();
});
</script>
Save template, refresh your blog and see the magic.
That's it! I hope you like this effect.! Stay tuned for more cool stuffs like this! Thanks for reading @Prince.
0 Comment to "How to Install Animation Loading Effect In Blogger"
Post a Comment