Create Awesome Loading Animation in your Blog

Creating Loading Animation Blog, Make Blogspot Loading Animation - Animation loading blog can give the effect of the manipulation of loading blog to appear more quickly, here I use a loading animation scripts from DTE:] then I mix with CSS3 Loading Animation of Alessio Atzeni.
Loading animation script DTE:] selects all the internal links will be animated loading, and of course you can modify the script again as you wish.

CSS3 LOADING ANIMATION LOOP

1)Go to blog template paste code bellow before  ]]></b:skin>

# loadhalaman . loadball {background-color: transparent; border: 5px solid rgb (240, 0, 0); border-right: solid 5px transparent; border-left: solid 5px transparent; border-radius: 50px; box-shadow: 0 0 35px rgb (255, 0, 0); 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 rgb (240, 0, 0); border-left: solid 5px transparent; border-right: solid 5px transparent; border-radius: 50px; box-shadow: 0 0 15px rgb (255, 0, 0); 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 rgb (255, 0, 0)} 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 rgb (255, 0, 0)} 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);}}

2)Find </head> paste code bellow before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

3)Finally find </Body> paste code bellow,bellow this </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</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);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>